Recipe 7.6. Drawing a Rectangle

Problem

You want to draw a rectangle at runtime.

Solution

Draw four connecting line segments at right angles. Use the Graphics.drawRect( ) method. For rectangles with rounded corners, use the Graphics.drawRoundRect( ) or Graphics.drawRoundRectComplex( ) method.

Discussion

To draw a simple rectangle, draw four lines using the lineTo( ) method:

// Specify a one-pixel, solid, black line
sampleSprite.graphics.lineStyle(1, 0, 100);

// Draw four lines to form the perimeter of the rectangle
sampleSprite.graphics.lineTo(100, 0);
sampleSprite.graphics.lineTo(100, 50);
sampleSprite.graphics.lineTo(0, 50);
sampleSprite.graphics.lineTo(0, 0);

As you can see, drawing a simple rectangle is no huge feat. However, there are several drawbacks to using the preceding technique of calling lineTo( ) four times. The obvious drawback is that it requires at least five lines of code: one to set the line style and four to draw the line segments. Another drawback is that you cannot easily draw the rectangle at an angle or with rounded corners.

You can use the Graphics.drawRect( ) method to simplify drawing a standard rectangle. The method requires four parameters specifying the X and Y coordinates of the upper-left corner and the width and height of the rectangle. The following draws a 100x50 rectangle with the upper-left corner aligned to 0,0:

sampleSprite.graphics.lineStyle(  );
sampleSprite.graphics.drawRect(0, 0, 100, 50);

The Graphics.drawRoundRect( ) method draws a rectangle with rounded corners with equal radii. The method accepts the same parameter list as drawRect( ) with one additional parameter specifying the value for the corner radii. The following draws the same rectangle as in the preceding example, except that it has rounded corners with radii of 20:

sampleSprite.graphics.lineStyle(  );
sampleSprite.graphics.drawRoundRect(0, 0, 100, 50, 20);

The Graphics.drawRoundRectComplex( ) method works just like drawRoundRect( ), except that you can specify the values for each radius independently. The method accepts the same parameter list as drawRect( ), with the addition of four parameters for the radii. The addition parameters are in the order of top left, top right, bottom left, and bottom right. The following draws the same rectangle as the preceding example, except that the corners have different radius values:

sampleSprite.graphics.lineStyle(  );
sampleSprite.graphics.drawRoundRect(0, 0, 100, 50, 0, 20, 5, 25);

You can draw filled rectangles by invoking beginFill( ), beginGradientFill( ), or beginBitmapFill( ) before calling the method or methods to draw the rectangle. Then call endFill( ) after the method(s):

sampleSprite.graphics.lineStyle(  );
sampleSprite.graphics.beginFill(0xFF0000);
sampleSprite.graphics.drawRectComplex(0, 0, 100, 50);
sampleSprite.graphics.endFill(  );