Recipe 4.6 Drawing an Ellipse

4.6.1 Problem

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

4.6.2 Solution

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

4.6.3 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); }

4.6.4 See Also

Recipe 4.5



ActionScript Cookbook
ActionScript 3.0 Cookbook: Solutions for Flash Platform and Flex Application Developers
ISBN: 0596526954
EAN: 2147483647
Year: 2005
Pages: 425

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net