O'Reilly logo

Essential ActionScript 3.0 by Colin Moock

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Drawing Curves

To draw curved lines we use the curveTo( ) method, which has this signature:

curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number)

The curveTo( ) method draws a quadratic Bézier curve from the current drawing pen position to the point (anchorX, anchorY) using an off-curve control point of (controlX, controlY). The curve tangents at each endpoint run in the direction of the line from the endpoint to the control point. The Bézier curve is contained in the convex hull of its three control points.

Conceptually speaking, the straight line that would run from the pen position to the end point (anchorX, anchorY) is pulled by the control point (controlX, controlY) to make a curve. If any of curveTo( )'s arguments are missing, the operation fails silently, and the position of the drawing pen remains unchanged. As with lineTo( ), the stroke characteristics of the curve (thickness, color, alpha, etc.) are determined by the most recent call to lineStyle( ).

The following code draws a four-point black curve from the drawing pen's default position (0, 0) to the anchor point (100, 0) using the control point (50, 100). The resulting curve is shown in Figure 25-3.

var canvas:Shape = new Shape();
addChild(canvas);

canvas.graphics.lineStyle(4);  // Set the stroke to 4-point, black
canvas.graphics.curveTo(50, 100, 100, 0);  // Draw the curve
A quadratic Bézier curve

Figure 25-3. A quadratic Bézier ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required