Actionscript Cookbook

4.5. Drawing a Circle

Problem

You want to draw a circle at runtime.

Solution

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

Discussion

You can create a circle in ActionScript with eight curves. Fewer curves results in a distorted circle and too many curves hinders performance. Let’s create a custom method of the MovieClip class for drawing circles. This method, drawCircle( ), allows for three parameters:

radius

The radius of the circle

x

The x coordinate of the circle’s center point. If undefined, the circle is centered at x = 0.

y

The y coordinate of the circle’s center point. If undefined, the circle is centered at y = 0.

Define the custom drawCircle( ) method on MovieClip.prototype to make it available to all movie clip instances:

MovieClip.prototype.drawCircle = function (radius, x, y) {
  // The angle of each of the eight segments is 45 degrees (360 divided by 8), which
  // equals π/4 radians.
  var angleDelta = Math.PI / 4;

  // Find the distance from the circle's center to the control points for the curves.
  var ctrlDist = radius/Math.cos(angleDelta/2);

  // Initialize the angle to 0 and define local variables that are used for the 
  // control and ending points. 
  var angle = 0;
  var rx, ry, ax, ay;

  // Move to the starting point, one radius to the right of the circle's center.
  this.moveTo(x + radius, y);

  // Repeat eight times to create eight segments.
  for (var i = 0; i < 8; i++) {

    // Increment the angle by angleDelta (π/4) to create the ...