Creating Rounded Square

[zandegran]

Hi ppl,
I need to create a square or polygon with rounded corners..
I need an attribute to be adjusted may be from 0 to 1..
0 will change the square to circle and 1 will keep it as a square.

Is there a way to create a shape, which is the difference of two shapes??
If this is possible, then I can create any shapes with rounded edges and allows me to solve some other problems as well.

[dana]

I don't think there's a simple solution to creating a rounded square programmatically. The way I have in mind would be to draw 2 rects that form a plus-shape, then put circles in each corner. I'm terrible at art, but I attempted to put together an image to demonstrate what I mean, hopefully you can get the idea (sorry it's so bad!).



The bounds of each shape would be fairly easy to compute using the 0 to 1 attribute you mentioned. That attribute can represent the radius of the circle, so 0 would draw no circle and the two boxes would overlap to make a square, 1 would set the radius to half the square's width and then all 4 circles would overlap and it'd make a circle.

[Mud]

That was my first thought, too.

Code: Select all

1. function drawRoundedRect(x, y, width, height, radius, circlestep)


2.   circlestep = circlestep or 32


3.   local hw, hh = width/2, height/2


4.  


5.   MOAIDraw.fillRect( x-hw+radius, y-hh,        x+hw-radius, y+hh )


6.   MOAIDraw.fillRect( x-hw,        y-hh+radius, x+hw,        y+hh-radius )


7.   MOAIDraw.fillCircle( x-hw+radius, y-hh+radius, radius, circlestep )


8.   MOAIDraw.fillCircle( x-hw+radius, y+hh-radius, radius, circlestep )


9.   MOAIDraw.fillCircle( x+hw-radius, y-hh+radius, radius, circlestep )


10.   MOAIDraw.fillCircle( x+hw-radius, y+hh-radius, radius, circlestep )


11. end

For instance:

Code: Select all

1. drawRoundedRect( 0,  100, 200, 100, 30 )


2. drawRoundedRect( 0,   20, 100,  26,  5 )


3. drawRoundedRect( 0, -110, 100, 200, 20 )

Would produce:

RoundedRect.PNG (3.13 KiB) Viewed 622 times

Which internally looks like:

[zandegran]

Thank you guys,
It is sad that a shape that is a overlapping area of two shapes cannot be created
I can use this, but I need to adjust the alpha of these shapes (the rounded rect).
With this it is problematic..

are you sure that there is noway of masking or doing something?
In the attachment there are two circles one with four sides and another red with 200 sides
if I can mask the blue with the red one then I can create a rounded square by reducing the radius of the red circle(mask)

[makotok1123]

Hello.
I tried to implement to try.

https://github.com/makotok/Hanappe/blob ... aphics.lua
https://github.com/makotok/Hanappe/blob ... sample.lua

How to implement.
Draw a line around the triangle function.
Fill in the trigonometric functions as well.

[zandegran]

This is what I need Thank you

[dana]

Thanks for contributing that makotok, it looks good!