Actionscript Cookbook

4.4. Drawing a Rounded Rectangle

Problem

You want to draw a rectangle with rounded corners, an offset, or rotation.

Solution

Create a custom MovieClip.drawRectangle( ) method using

the Drawing API and invoke it on a movie clip.

Discussion

The drawSimpleRectangle( ) method from Recipe 4.3 is, as the name suggests, quite simple.

Let’s create a more complex version that also:

• Draws a rectangle with a specified angle of rotation

• Let’s you specify the rectangle center’s coordinates

• Can draw a rectangle with rounded corners

The drawRectangle( ) method accepts six parameters:

width

The width of the rectangle in pixels

height

The height of the rectangle in pixels

round

The radius (in pixels) of the arc that is used to round the corners. If the value is undefined or 0, the corners remain square.

rotation

The clockwise rotation to apply to the rectangle in degrees. If undefined, the rectangle is not rotated.

x

The x coordinate of the center point for the rectangle. If undefined, the rectangle is centered at x = 0.

y

The y coordinate of the center point for the rectangle. If undefined, the rectangle is centered at y = 0.

Here is our enhanced drawRectangle( ) method, defined on MovieClip.prototype, so it’s available to all movie clip instances:

// Include the custom Math library from Chapter 5 to access Math.degToRad(  ). #include "Math.as" MovieClip.prototype.drawRectangle = function (width, height, round, rotation, x, y) { // Make sure the rectangle is at least as wide and tall as the rounded corners. ...