Actionscript Cookbook

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; ...