Rounded Rectangles

[veethree]

So due to boredom i decided to try and make rounded rectangles in löve. And then i did. And here it is.

Code: Select all

function round_rectangle(x, y, width, height, radius)
	--RECTANGLES
	love.graphics.rectangle("fill", x + radius, y + radius, width - (radius * 2), height - radius * 2)
	love.graphics.rectangle("fill", x + radius, y, width - (radius * 2), radius)
	love.graphics.rectangle("fill", x + radius, y + height - radius, width - (radius * 2), radius)
	love.graphics.rectangle("fill", x, y + radius, radius, height - (radius * 2))
	love.graphics.rectangle("fill", x + (width - radius), y + radius, radius, height - (radius * 2))
	
	--ARCS
	love.graphics.arc("fill", x + radius, y + radius, radius, math.rad(-180), math.rad(-90))
	love.graphics.arc("fill", x + width - radius , y + radius, radius, math.rad(-90), math.rad(0))
	love.graphics.arc("fill", x + radius, y + height - radius, radius, math.rad(-180), math.rad(-270))
	love.graphics.arc("fill", x + width - radius , y + height - radius, radius, math.rad(0), math.rad(90))
end

The way it works is very simple, It draws a couple rectangles in this formation:

Then fills in the corners using arcs

Put it all together and you get this:

These were drawn with the "line" mode for illustration purposes.

Syntax is like a normal rectangle except it has an extra "radius" argument which is the corner radius (How round the rectangle is).
I attached a little demo as well, You can create rounded rectangles by clicking and dragging. first click should be the top left corner, and where you let go should be the bottom right corner, does not work properly the other way around cause i'm lazy.

But yeah, Perhaps someone, somewhere, some day will find this useful.

[Doctory]

This is brilliant!

[Zarty55]

When only X or only Y is negative it doesn't work well.

[Ref]

Any reason for using five rectangles when three will do?

Code: Select all

gr.rectangle("fill", x + r,	y + r,		w - 2*r, 	h - 2*r )
gr.rectangle("fill", x + r,	y,		w - 2*r, 	r )
gr.rectangle("fill", x + r,	y + h - r,	w - 2*r, 	r )

is the same as

Code: Select all

gr.rectangle('fill', x + r, y, 			w-2*r,		h )

Just comparing your code with mine - no biggy.

[Germanunkol]

Nice!

I'd suggest to use a polygon though. It can work similarly but has the advantage that you can also draw it using "line" draw mode - and it won't have any lines going through the middle. Also, just one draw call...

[Robin]

I'd suggest to use a polygon though.

Like my roundrect.lua, which, coincidentally, will be exactly four years old this Friday! (Actually, it's older than that, but that stuff got lost.)

... if I can find it. It seems to be lost to time.

[kikito]

... if I can find it. It seems to be lost to time.

Found one version here:

viewtopic.php?f=4&t=11511&p=69006#p69006

I don't know if its' the most recent one.

Funny enough, on that post you mention you "can't remember how many times you have uploaded it".

I suggest creating a github/repo for it.

[Robin]

Thanks! And yeah, I was thinking the same thing. Here's a Gist of it.

[Ref]

Well, if you need a 'line' mode you could use this simple approach

Code: Select all

gr.setColor( line_color )
round_rectangle( x,  y,  w,  h,  r )
gr.setColor( background_color )               -- to remove center of rectangle
round_rectangle( x+1, y+1, w-2, h-2, r )  -- giving a line width of one

but it does require multiple draw calls and no polygon created ... so can't be reused without being regenerated.

[Robin]

... and it has the problem that it only works if you're drawing on a pristine background.