Recipe 7.4. Drawing a Curve

Problem

You want to draw a curve using ActionScript.

Solution

Use the Graphics.curveTo( ) method.

Discussion

Once you have set a line style, you can draw a curve using the curveTo( ) method. The curveTo( ) method draws an approximation of a Bezier curve (although optimized for performance), which requires three points: a starting point, a control point, and a destination point:

• The starting point is always determined by the pen's current location.

• The destination point is simply the point on the canvas to which you want to draw.

• The control point is the point that determines the shape of the curve, and it is calculated by determining where the tangents to the curve at the starting and destination points intersect. The control point is not actually on the curve in all cases, except for straight line segments. Figure 7-1 shows the control point for a curve.

Figure 7-1. The control point of a curve

The curveTo( ) method requires four parameters. The first two parameters specify the X and Y coordinates of the control point; the next two parameters specify the X and Y coordinates of the destination point. The following example draws a curve with a control point at 0,100 and a destination point at 100,100:

sampleSprite.graphics.lineStyle(  );
sampleSprite.graphics.curveTo(0, 100, 100, 100);