rectangle drawing

[Öbey]

I draw an image with (x, y, w, h)=(0, 0, 100, 100)
But in order to draw a border around it(from its upper left corner to lower right corner) I need to draw a rectangle with
(x+0.5, y+0.5, w-1, h-1) = (0.5, 0.5, 99, 99)
I understand pixel grid for lines are the center of the pixels, it is mentioned in the wiki and makes sense.
It says nothing on the wiki about the pixel grid for the rectangle. Also, It is a little awkward for the rectangle

[Boolsheet]

I'll start with something you probably already know. Just making sure there's no misunderstanding (and for others who are interested).

You have to understand that the coordinates do not map to pixels, but LÖVE happens to initialize the coordinate system so that they line up with them. At the very top left of the window there is the point (0, 0) and at the very bottom right there is (window_width, window_height).

After that, we need to know for what the numbers passed to love.graphics.rectangle and love.graphics.line are actually used.
For the filled rectangle it's easy. x and y make up the starting point of the filled area. width and height is how far the area expands from there, a vector to the endpoint basically.
Lines are a bit different. Like you already noticed, the x and y coordinates define the point in the middle of the line. The line width set with love.graphics.setLineWidth defines how thick it will get. The rectangle line works the same where the width and height also represent the vector to the opposite point.
Edit: For points, the coordinates define the center of it.

And because images are always fun to look at, here's what I mean in png form.

recandline.png (24.26 KiB) Viewed 4389 times

Edit: With the "rough" line style, the points are directly on the line ends. To get that line in the image, y1 and y2 must then be 2 and 11 instead.

This assumes the coordinate system has not been modified with love.graphics.translate, love.graphics.scale, or one of the other functions. The black dots are points with their position where they would be in the coordinate system besides them in parentheses. I chose to align the rectangle and line with the pixels because it was easier to draw.

Is this the information you were looking for?

[kikito]

What about rectangles drawn using the "line" mode? They "like 4 lines", right? So you have to take into account the line width if you want the borders to be perfectly aligned with the areas.

[Santos]

...And now everything suddenly makes sense. That diagram is wonderful. Thanks for asking the question Öbey, and thanks for the answers Boolsheet and kikito!

[Boolsheet]

What about rectangles drawn using the "line" mode? They "like 4 lines", right? So you have to take into account the line width if you want the borders to be perfectly aligned with the areas.

Correct. I did this image for an issue on the tracker. It was drawn with this call:

Code: Select all

love.graphics.setLineWidth(1)
love.graphics.rectangle("line", 56.5, 32.5, 4, 4)

linepoints.png (6.91 KiB) Viewed 4339 times