How Do I Draw with Code?: Chapter 12 - ActionScript 3.0 Quick Reference Guide
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13

12.8 Drawing a Rectangle with Rounded Corners

Problem

You want to draw a rectangle with rounded corners.

Solution

Use the drawRoundRect() method of the Graphics class.

Discussion

This variance on drawRect() requires a fifth parameter that represents the diameter of a circle used to round off the rectangle’s corners. The last line of the following code creates a 100 x 60 pixel rectangle with rounded corners that have a radius of 15.

var sp:Sprite = new Sprite();
addChild(sp);
sp.x = sp.y = 100;
var g:Graphics = sp.graphics;
g.lineStyle(1, 0x0000FF);
g.drawRoundRect(0, 0, 100, 60, 15);

The fifth parameter requires a diameter, rather than a potentially more intuitive radius, to easily support the optional sixth parameter. Instead of specifying only a diameter to build the rectangle’s corners, you can also specify a height and width, constructing your corner from an ellipse. This method gives you more granular control over the corner shapes. The following substitute line, for example, uses an ellipse with a width of 30 and a height of 50 to create its corners.

g.drawRoundRect(0, 0, 100, 60, 30, 50);

You can also use the under-documented method drawRoundRectComplex() that requires eight parameters. The first four are, again, the x, y, width, and height of the rectangle. The last four, however, are the diameters of each corner circle, in the order of upper-left, upper-right, lower-left, lower-right. The following substitute line for the previous example would create a tab shape, with a straight bottom edge, and two rounded top corners:

g.drawRoundRectComplex(0, 0, 100, 40, 20, 20, 0, 0);

Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13

Next Pagearrow