Coordinates on `QPainter`

Heads up! You've already completed this tutorial.

Virginia | 2020-05-10 20:24:14 UTC | #1

The example of painter.drawLine(10, 10, 300, 200) doesn't look like a line from the point (10,10) to the point (300,200) to me. It looks more like it goes from (10,200) to (300,10). Am I missing something?

https://www.pythonguis.com/courses/custom-widgets/bitmap-graphics/


martin | 2020-05-10 20:25:01 UTC | #2

Drawing painter.drawLine(10, 10, 300, 200) is from x,y = 10, 10 to x,y = 300, 200 ...with 0, 0 being in the top left. Would it help maybe to show some points with the coordinates annotated next to them?


Virginia | 2020-05-10 20:25:46 UTC | #3

That would help a lot - I originally assumed it worked like a standard mathematical plane, with (0,0) at the bottom left. I did eventually figure out that it was as you said. I also think it made it harder to understand with the slope of the line being so close to 1, but coordinates would definitely clear up the confusion. It seems like to get what you would expect from a line in a mathematical plane between (10,10) and (300,200) you would have to enter (10,290, 300,100). Is that correct?


Luca | 2020-05-20 15:24:02 UTC | #4

If your QPixMap height is 300 the coordinates with the origin at the bottom-left should be:

(10, 289, 300, 99).

Remember that the coordinates' ranges of a QPixMap(width, height) are:

  • [0, width-1] for x coordinates
  • [0, height-1] for y coordinates

The general rule to convert the y coordinates from the top-left origin to the bottom-left one is:

y_bl = height - 1 - y_tl

where y_bl is a y represented in the coordinate system with the origin at the bottom-left and y_tl is a y represented in the coordinate system with the origin at the top-left.

Imagine that you have a line starting at the bottom of your QPixMap so y1_tl would be y_tl_max:

y1_tl = 299

intuitively, you would expect to have y1_bl = 0, right?

In fact:

y1_bl = 300 - 1 - 299

is equal to 0

I suggest you to check the following links: https://doc.qt.io/qt-5/coordsys.html https://doc.qt.io/qt-5/qpainter.html#drawLine-2


Virginia | 2020-05-20 15:31:17 UTC | #5

Thank you for the links, @Luca!


Over 10,000 developers have bought Create GUI Applications with Python & Qt!

To support developers in [[ countryRegion ]] I give a [[ localizedDiscount[couponCode] ]]% discount with the code [[ couponCode ]] — Enjoy!

For [[ activeDiscount.description ]] I'm giving a [[ activeDiscount.discount ]]% discount with the code [[ couponCode ]] — Enjoy!

Well done, you've finished this tutorial! Mark As Complete
[[ user.completed.length ]] completed [[ user.streak+1 ]] day streak