How Do I Draw with Code?: Chapter 12 - ActionScript 3.0 Quick Reference Guide
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13

12.5 Drawing a Curve

Problem

You want to draw a curve from point A to point B.

Solution

Use the curveTo() method of the Graphics class.

Discussion

Drawing a curve is similar to drawing a line, in that a curve is drawn from the current drawing point to a new point. However, the curveTo() method adds a third point, called a control point or handle, to shape the curve. ActionScript creates curves that use one control point for two points. This trait is in contrast to many drawing applications, such as Adobe Illustrator, which uses one or more control points for every point.

Placing the control point is an important part of determining the shape of your curve. For example, consider turning the line from the section called “12.4 Drawing a Line” into a concave arc, resembling a smile. To pull the curve down in the middle, you might select a control point halfway between and below the two end points. Therefore, if the line spans from (0, 0) to (200, 0), one possible choice for a control point is (100, 100). These x and y coordinates are passed to the curveTo() method as the first and second arguments, while the destination or end point x and y coordinates are the last two arguments of the method.

var sp:Sprite = new Sprite();
addChild(sp);
sp.x = sp.y = 100;
var g:Graphics = sp.graphics;
g.lineStyle(1, 0x0000FF);
g.curveTo(100, 100, 200, 0);

Omitting moveTo() in the code sets the first point at (0, 0), or the sprites registration point. The final result is a curve that starts at (0, 0), ends at (200, 0), but is curved through a control point of (100, 100).

Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13

Next Pagearrow