2009-07-30

Draw rounded rectangles with GdiPlusX

this post is just to answer a question from mr. reed.


bob powell, in his great website site says: "the trick here is to use a graphicspath object to assemble a collection of  lines and arcs that make up the rounded rectangle shape.


arcs are used to round off the corners, so you have to position the lines 1 radius, whatever that may be, from the actual corner."


 


the code below shows bob's function converted to vfp and gdiplusx, to obtain this result:



 


local lobmp as xfcbitmap, logfx as xfcgraphics
with _screen.system.drawing as
xfcdrawing
   * create a new bitmap
   lobmp = .bitmap
.new(200,170)
   * get a graphics object for drawing
   logfx = .graphics.fromimage(lobmp)
   * clear the drawing canvas
   logfx.clear(.color
.lightcoral)
   * draw the rounded rectangle
   =drawroundrect(logfx, .pens.blue, 20, 30, 150, 100, 20)
   * save image to file
   lobmp.save
("roundedrect.png", .imaging.imageformat.png)
endwith
run
/n explorer.exe roundedrect
.png
 
 
 
function drawroundrect(togfx as xfcgraphics, topen as
xfcpen, ;
      tnx, tny, tnwidth, tnheight, tnradius)
   * adapted by cesar from bob powell's sample taken from
   *
http://www.bobpowell.net/roundrects.htm


   local logpath as xfcgraphicspath
   logpath =
_screen.system
.drawing.drawing2d.graphicspath.new()


   with logpath
      .addline(tnx + tnradius, tny, tnx + tnwidth - (tnradius*2), tny)
      .addarc(tnx + tnwidth - (tnradius*2), tny, tnradius*2, tnradius*2, 270, 90)
      .addline(tnx + tnwidth, tny + tnradius, tnx + tnwidth, tny + tnheight - (tnradius*2))
      .addarc(tnx + tnwidth - (tnradius*2), tny + tnheight - (tnradius*2), tnradius*2, tnradius*2,0,90)
      .addline(tnx + tnwidth - (tnradius*2), tny + tnheight, tnx + tnradius, tny + tnheight)
      .addarc(tnx, tny + tnheight - (tnradius*2), tnradius*2, tnradius*2, 90, 90)
      .addline(tnx, tny + tnheight - (tnradius*2), tnx, tny + tnradius)
      .addarc(tnx, tny, tnradius*2, tnradius*2, 180, 90)
      .closefigure()
   endwith
   togfx.drawpath(topen, logpath)
endfunc


notice that the above function receives a xfcpen object to draw the rounded rectangle. in order to draw a filled rounded rectangle, all we need is to add a small tweak in the above function to use a brush object instead a pen, and call the fillpath function instead of drawpath.


i leave this easy exercise to you :-d


 


 


 


 


 


 


 

No comments:

Post a Comment