Drawing an Ellipse using ActionScript

written by: Elis Frugalo; article published: year 2006, month 12;


In: Root » Computers and technology » Flash » Drawing an Ellipse using ActionScript

Dutch French Spanish Portuguese Italian German Japanese Chinese Korean Russian Arabic Bookmark and Share this Article

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

You can create a method of the MovieClip class to draw an ellipse that is very similar to the drawCircle( ) method. 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.

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

Disclaimer

1) E-articles is not responsible for the information contained by this article as well for any and all copyright infringements by authors and writers. E-articles is a free information resource. If you suspect this article for any copyright infringement, please read the terms of service and contact us to investigate the problem.
2) E-articles is not responsible for inaccuracies, falsehoods, or any other types of misinformation this article may contain and will not be liable for any loss or damage suffered by a user through the user's reliance on the information gained here.

link to this article