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 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:
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 toxRadius
and another that // corresponds toyRadius
. 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);
}
Get Actionscript Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.