O'Reilly logo

Actionscript Cookbook by Joey Lott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

4.6. Drawing an Ellipse

Problem

You want to draw an ellipse (oval) at runtime.

Solution

Create a custom MovieClip.drawEllipse( ) method using the Drawing API and invoke it on a movie clip.

Discussion

You can create a method of the MovieClip class to draw an ellipse that is very similar to the drawCircle( ) method in Recipe 4.5. In fact, the drawCircle( ) method is merely a degenerate version of drawEllipse( ), in which the radii in the x and y directions are the same.

The custom drawEllipse( ) method accepts four parameters:

xRadius

The radius of the ellipse in the x direction (major axis).

yRadius

The radius of the ellipse in the y direction (minor axis).

x

The x coordinate of the center of the ellipse.

y

The y coordinate of the center of the ellipse.

Refer to Recipe 4.5 for those aspects of the drawEllipse( ) method that are not commented on here.

MovieClip.prototype.drawEllipse = function (xRadius, yRadius, x, y) {
  var angleDelta = Math.PI / 4;

  // While the circle has only one distance to the control point for each segment, 
  // the ellipse has two distances: one that corresponds to xRadius and another that
  // corresponds to yRadius.
  var xCtrlDist = xRadius/Math.cos(angleDelta/2);
  var yCtrlDist = yRadius/Math.cos(angleDelta/2);
  var rx, ry, ax, ay;
  this.moveTo(x + xRadius, y);
  for (var i = 0; i < 8; i++) {
    angle += angleDelta;
    rx = x + Math.cos(angle-(angleDelta/2))*(xCtrlDist);
    ry = y + Math.sin(angle-(angleDelta/2))*(yCtrlDist);
    ax = x + Math.cos(angle)*xRadius;
    ay = y + Math.sin(angle)*yRadius;
    this.curveTo(rx, ry, ax, ay);
  }
}

Once you have defined and included the drawEllipse( ) method in your Flash document, you can draw an ellipse rather easily. Use the drawEllipse( ) method the same way you used the drawCircle( ) method in Recipe 4.5 but provide both x and y radii instead of just a single radius. Remember that you still need to define the line style before you call the drawEllipse( ) method.

// Create an ellipse with minor and major axes of 100 and 200, respectively.
this.createEmptyMovieClip("ellipse", 1);
ellipse.lineStyle(1, 0x000000, 100);    // Use a one-pixel, black, solid border
ellipse.drawEllipse(100, 200);

Having defined drawEllipse( ), we can rewrite the drawCircle( ) method, as follows:

MovieClip.prototype.drawCircle = function (radius, x, y) {
  // Call drawEllipse(  ) with the same radius for both x and y.
  this.drawEllipse (radius, radius, x, y);
}

See Also

Recipe 4.5

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required