rectangle drawing

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
Öbey
Prole
Posts: 13
Joined: Wed Aug 08, 2012 7:18 am

rectangle drawing

Post by Öbey » Mon Aug 13, 2012 10:03 am

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

User avatar
Boolsheet
Inner party member
Posts: 780
Joined: Wed Dec 29, 2010 4:57 am
Location: Switzerland

Re: rectangle drawing

Post by Boolsheet » Mon Aug 13, 2012 1:00 pm

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
recandline.png (24.26 KiB) Viewed 2540 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. :P

Is this the information you were looking for?
Last edited by Boolsheet on Sat Apr 20, 2013 11:37 am, edited 2 times in total.
Shallow indentations.

User avatar
kikito
Inner party member
Posts: 3153
Joined: Sat Oct 03, 2009 5:22 pm
Location: Madrid, Spain
Contact:

Re: rectangle drawing

Post by kikito » Mon Aug 13, 2012 5:38 pm

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.
When I write def I mean function.

Santos
Party member
Posts: 384
Joined: Sat Oct 22, 2011 7:37 am

Re: rectangle drawing

Post by Santos » Mon Aug 13, 2012 6:32 pm

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

User avatar
Boolsheet
Inner party member
Posts: 780
Joined: Wed Dec 29, 2010 4:57 am
Location: Switzerland

Re: rectangle drawing

Post by Boolsheet » Tue Aug 14, 2012 4:08 am

kikito wrote: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
linepoints.png (6.91 KiB) Viewed 2490 times
Shallow indentations.

Post Reply

Who is online

Users browsing this forum: No registered users and 59 guests