Fatbox rectangle with rounded corners

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|578\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Blitz -> Fatbox rectangle with rounded corners
Tue, 16 Sep 2008, 23:49
LostUser	I'd like to create a fatBox rectangle with rounded corners (fill should be optional). The following 2 functions are fatBox and RoundedRect. The fatBox gives me a fat border around a rectangle, and RoundedRect gives me rounded corners but with a thin border. I'm intending to use fatBoxs for buttons, or for display purposes. Any help on combining fatBox and RoundedRect would be appreciated. ;******************************** fatBox ************************************** ; Parameters are: ; x%, y%, wide%, high%, penSize%, rotAngle% ; ; x%, y% are the coords of the upper left corner of the box to be plotted ; this function rotates box around the upper left corner (not center of box) ; wide% is the width of the box ; high% is the height of the box ; penSize% is the thickness of lines used to plot box ; rotAngle% is the rotation angle of the box to be plotted (0 to 360 typically) ; ;*************************************************************************************** Function fatBox(x%, y%, wide%, high%, penSize%, rotAngle%) If rotAngle > 360 Then rotAngle = rotAngle Mod 360 ;No rotation involved, so just draw a box If rotAngle% = 0 Or rotAngle% = 360 Then fatLine(x% , y% , x% + wide%, y% , penSize%) fatLine(x% + wide%, y% , x% + wide%, y% + high%, penSize%) fatLine(x% , y% + high%, x% + wide%, y% + high%, penSize%) fatLine(x% , y% , x%, y% + high%, penSize%) Else ;Make rotation calculations and draw rotated box vtx% = rotAngle% + 90 cs% = Cos(vtx%) * high% sn% = Sin(vtx%) * high% x1% = Cos(rotAngle%)* wide% + x% y1% = Sin(rotAngle%)* wide% + y% fatLine(x%, y%, x1%, y1%, penSize%) x2% = cs% + x1% y2% = sn% + y1% fatLine(x1%, y1%, x2%, y2%, penSize%) x3% = cs% + x% y3% = sn% + y% fatLine(x%, y%, x3%, y3%, penSize%) fatLine(x2%, y2%, x3%, y3%, penSize%) End If End Function Function RoundedRect(x,y,w,h,radius#,fill=1) ;Draws a rectangle with rounded edges of specified radius If radius>w/2 Then radius=w/2 If radius>h/2 Then radius=h/2 If fill Rect x+radius,y,w-radius2,h Rect x,y+radius,w,h-radius2 Oval x,y,radius2,radius2 Oval x+w-radius2,y,radius2,radius2 Oval x,y+h-radius2,radius2,radius2 Oval x+w-radius2,y+h-radius2,radius2,radius2 Else Line x+radius,y,x+w-radius,y Line x,y+radius,x,y+h-radius Line x+radius,y+h,x+w-radius,y+h Line x+w,y+radius,x+w,y+h-radius ang#=0 r=ColorRed():g=ColorGreen():b=ColorBlue() LockBuffer GraphicsBuffer() Repeat If ang<90 WritePixelFast x+w-radius+radiusSin(ang),y+radius-radiusCos(Ang), getrgb(r,g,b), buffer ElseIf ang<180 WritePixelFast x+w-radius+radiusSin(ang),y+h-radius-radiusCos(Ang), getrgb(r,g,b), buffer ElseIf ang<270 WritePixelFast x+radius+radiusSin(ang),y+h-radius-radiusCos(Ang), getrgb(r,g,b), buffer Else WritePixelFast x+radius+radiusSin(ang),y+radius-radiusCos(Ang), getrgb(r,g,b), buffer End If ang=ang+45/radius Until ang#=>360 UnlockBuffer GraphicsBuffer() End If End Function --v
Wed, 17 Sep 2008, 05:28
Jayenkai	I gave up trying to add rotation, but here's a rough rounded rectangle thick edge box.. In classic JNK rounded rectangle thick edge box colours! Graphics 800,600,32,2 SetBuffer BackBuffer() thick=4 Repeat Cls RoundedRectOutlined(100,200,400,200,$FFFF00,$FF9900,thick,rot,0) RoundedRectOutlined(100,30,100,50,$FFFF00,$FF9900,thick,rot,1) If KeyDown(203) And thick>2 Then thick=thick-1 If KeyDown(205) And thick<24 Then thick=thick+1 Flip Until KeyDown(1) End Function RoundedRectOutlined(x,y,width,height,FillCol=$FFFF00,OutlineCol=$FF9900,thick=8,rot=0,fade=0) ; Sorry, gave up trying to rotate it! Color 0,0,fillcol Rect x,y,width,height,1 For n=0 To thick Color 0,0,FillCol LockBuffer BackBuffer() For ang=0 To 90 Step 5 WritePixelFast x+(thick-1)-Sin(ang)n,y+(thick-1)-Cos(ang)n,FillCol WritePixelFast x-(thick-1)+width+Sin(ang)n,y+(thick-1)-Cos(ang)n,FillCol WritePixelFast x+(thick-1)-Sin(ang)n,y-(thick-1)+height+Cos(ang)n,FillCol WritePixelFast x-(thick-1)+width+Sin(ang)n,y-(thick-1)+height+Cos(ang)n,FillCol Next UnlockBuffer BackBuffer() Color 0,0,OutlineCol:argb=outlinecol If n<thick/2 Then Color 0,0,fillcol:argb=fillcol If fade=1 a=(fillcol And $FF0000) Shr 16 c=(outlinecol And $FF0000) Shr 16 r=(((c-a)n)/thick)+a a=(fillcol And $FF00) Shr 8 c=(outlinecol And $FF00) Shr 8 g=(((c-a)n)/thick)+a a=(fillcol And $FF) c=(outlinecol And $FF) b=(((c-a)n)/thick)+a Color r,g,b argb=(255 Shl 24)+(r Shl 16)+(g Shl 8)+b EndIf Line x-n,y,x-n,y+height Line x+width+n,y,x+width+n,y+height Line x,y-n,x+width,y-n Line x,y+height+n,x+width,y+height+n For ang=0 To 90 WritePixelFast x-Sin(ang)n,y-Cos(ang)n,argb WritePixelFast x+width+Sin(ang)n,y-Cos(ang)n,argb WritePixelFast x-Sin(ang)n,y+height+Cos(ang)n,argb WritePixelFast x+width+Sin(ang)n,y+height+Cos(ang)*n,argb Next Next End Function --v -=-=- ''Load, Next List!''
Wed, 17 Sep 2008, 05:34
LostUser	Hey Jayenkai, that's great! Thanks a lot. I never used the rotation feature anyway. I'm currently programming a Commodore 64-styled management game similar to the GUI style of "Tracksuit Manager" (https://c64s.com/game/2002/tracksuit_manager/). I liked how they laid out their boxes, so I'm trying to replicate a similar setup. Thanks again.
Wed, 17 Sep 2008, 05:40
Jayenkai	Probably best to draw what you need, grab to an image buffer, then redraw that instead of the constant pixel/line stuff.. -=-=- ''Load, Next List!''
Wed, 17 Sep 2008, 05:59
Andy_A	Seems like you should be using "fatSuperEllipse" which will produce the rounded rects using "fat lines" https://blitzmax.com/codearcs/codearcs.php?code=803
Wed, 17 Sep 2008, 12:09
Phoenix	Another approach: Graphics(640, 480, 0, 2) SetBuffer(BackBuffer()) Color(0, 0, $FFFF00) borderSize = 5 While(Not KeyHit(1)) borderSize = borderSize + MouseZSpeed() If(borderSize < 2) Then borderSize = 2 If(borderSize > 20) Then borderSize = 20 RoundRect(MouseX(), MouseY(), 200, 100, borderSize) Flip Cls Wend Function RoundRect(x, y, width, height, thickness, borderColor$ = $FF9900) r = ColorRed() g = ColorGreen() b = ColorBlue() Color(0, 0, borderColor$) diameter = thickness * 2 For i = 0 To 1 inner = i * thickness If(i = 1) Then Color(r, g, b) Oval(x + inner, y + inner, diameter, diameter) ; Top-Left Oval(x + width - diameter - inner, y + inner, diameter, diameter) ; Top-Right Oval(x + inner, y + height - diameter - inner, diameter, diameter) ; Bottom-Left Oval(x + width - diameter - inner, y + height - diameter - inner, diameter, diameter) ; Bottom-Right Rect(x + inner, y + thickness + inner, diameter, height - diameter - inner * 2) ; Left Rect(x + thickness + inner, y + inner, width - diameter - inner * 2, diameter) ; Top Rect(x + width - diameter - inner, y + thickness + inner, diameter, height - diameter - inner * 2) ; Right Rect(x + thickness + inner, y + height - diameter - inner, width - diameter - inner * 2, diameter) ; Bottom Next Rect(x + thickness * 2, y + thickness * 2, width - thickness * 4, height - thickness * 4) End Function --v
Wed, 17 Sep 2008, 14:51
Jayenkai	Yeah, that too I was trying for ages to get those outer lines to rotate right, and failing miserably... Jay relearns the shroom's teachings.. Keep things simple! -=-=- ''Load, Next List!''
Wed, 17 Sep 2008, 21:22
Andy_A	Here's a way to make the filled rounded rects using the 'fatSuperEllipse' function. AppTitle "Rounded Rects Using Fat Super Ellipse" Global sw%, sh% screenSize(1) ClsColor 255,240,200 Cls SeedRnd MilliSecs() st = MilliSecs() numRects% = 200 ; <----- change number of rounded rects here For i% = 0 To numRects - 1 Color Rand(0,192), Rand(0,192), Rand(0,192) wd% = Rand(15,35) ;random widths (x radius) hi% = Rand(5,10) ;random heights (y radius) cx% = Rand(wd+2,sw-wd-2) ;random center x cy% = Rand(hi+2,sh-hi-2) ;random center y ex# = Rnd(5.0, 99.0) ;random exponent sg% = 10 ;10 line segments per rect (fewer is faster) ps% = Rand(5,10) ;random pen size (line thickness) fillRect% = 1 ;always fill rounded rects fatSuperEllipse(cx, cy, wd, hi, ex, sg, ps, fillRect) Next et = MilliSecs()-st Color 0,0,0 fatSuperEllipse(sw/2, sh-20, 133, 7, 19.0, 10, 14, 0) Color 255,200,64 Text sw/2,sh-27,"Avg time per rounded rect: "+et/Float(numRects) +"ms", True, False Flip WaitMouse() End ;rotation was stripped from this function to allow using 'Rect' to fill rounded rects Function fatSuperEllipse (centerX%, centerY%, xRadius%, yRadius%, exponent#, numSegs%, penSize%, fill% = 0) If numSegs% >=2 Then detail# = 360.0/Float(numSegs%) Else detail# = 180.0 End If If exponent# = 2.0 Or exponent# = 0.0 Then power# = 0.0 Else power# = 2.0/exponent#-1 End If x1% = xRadius% * 1.0^power# + centerX% y1% = centerY% theta# = detail# limit# = 360.0 + detail# While theta# <= limit# cosTheta# = Cos(theta#) sinTheta# = Sin(theta#) x2% = xRadius% * cosTheta# * Abs(cosTheta#)^power# + centerX% y2% = yRadius% * sinTheta# * Abs(sinTheta#)^power# + centerY% fatLine (x1%, y1%, x2%, y2%, penSize%) x1% = x2% y1% = y2% theta# = theta# + detail# Wend If fill% = 1 Then Rect centerX-xRadius, centerY-yRadius, xRadius * 2, yRadius * 2, True End If End Function Function fatLine(x1%, y1%, x2%, y2%, penSize%) If penSize% < 1 Then Return False If penSize% = 1 Then Line(x1%, y1%, x2%, y2%): Return offset% = penSize% Shr 1 deltax% = Abs(x2% - x1%) deltay% = Abs(y2% - y1%) If deltax% >= deltay% Then numovals% = deltax% + 1 d% = (2 * deltay%) - deltax% dinc1% = deltay% Shl 1 dinc2% = (deltay% - deltax%) Shl 1 xinc1% = 1 xinc2% = 1 yinc1% = 0 yinc2% = 1 Else numovals% = deltay% + 1 d% = (2 * deltax%) - deltay% dinc1% = deltax% Shl 1 dinc2% = (deltax% - deltay%) Shl 1 xinc1% = 0 xinc2% = 1 yinc1% = 1 yinc2% = 1 End If If x1% > x2% Then xinc1% = - xinc1% xinc2% = - xinc2% End If If y1% > y2% Then yinc1% = - yinc1% yinc2% = - yinc2% End If x% = x1% - offset% y% = y1% - offset% For i% = 1 To numovals% Oval x%, y%, penSize%, penSize%, 1 If d% < 0 Then d% = d% + dinc1% x% = x% + xinc1% y% = y% + yinc1% Else d% = d% + dinc2% x% = x% + xinc2% y% = y% + yinc2% End If Next End Function Function screenSize%(screen%) Select screen Case 1: sw% = 800: sh% = 600 Case 2: sw% = 1024: sh% = 768 Case 3: sw% = 1280: sh% = 1024 Case 4: sw% = 1600: sh% = 1200 End Select Graphics sw, sh , 32, 2 SetBuffer BackBuffer() End Function --v
Mon, 22 Sep 2008, 09:02
LostUser	Many thanks Andy_A... I could never get the fatSuperEllipse to do the rounded rectangle thing. Thanks for your help!
Fri, 26 Sep 2008, 14:24
Andy_A	Just saw this post. Glad it's gonna work for you. Cheers, Andy