ACTIONSCRIPT 3 Developer’s Guide en

ACTIONSCRIPT 3.0 DEVELOPER’S GUIDE
Using the drawing API
Drawing straight lines
Flash Player 9 and later, Adobe AIR 1.0 and later
When you call the lineTo() method, the Graphics object draws a straight line from the current drawing point to the
coordinates you specify as the two parameters in the method call, drawing with the line style you have specified. For
example, this line of code puts the drawing point at the point 100, 100 then draws a line to the point 200, 200:
myShape.graphics.moveTo(100, 100);
myShape.graphics.lineTo(200, 200);
The following example draws red and green triangles with a height of 100 pixels:
var triangleHeight:uint = 100;
var triangle:Shape = new Shape();
// red triangle, starting at point 0, 0
triangle.graphics.beginFill(0xFF0000);
triangle.graphics.moveTo(triangleHeight / 2, 0);
triangle.graphics.lineTo(triangleHeight, triangleHeight);
triangle.graphics.lineTo(0, triangleHeight);
triangle.graphics.lineTo(triangleHeight / 2, 0);
// green triangle, starting at point 200, 0
triangle.graphics.beginFill(0x00FF00);
triangle.graphics.moveTo(200 + triangleHeight / 2, 0);
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight);
triangle.graphics.lineTo(200, triangleHeight);
triangle.graphics.lineTo(200 + triangleHeight / 2, 0);
this.addChild(triangle);
Drawing curves
Flash Player 9 and later, Adobe AIR 1.0 and later
The curveTo() method draws a quadratic Bézier curve. This draws an arc that connects two points (called anchor
points) while bending toward a third point (called the control point). The Graphics object uses the current drawing
position as the first anchor point. When you call the curveTo() method, you pass four parameters: the x and y
coordinates of the control point, followed by the x and y coordinates of the second anchor point. For example, the
following code draws a curve starting at point 100, 100 and ending at point 200, 200. Because the control point is at
point 175, 125, this creates a curve that moves to the right and then downward:
myShape.graphics.moveTo(100, 100);
myShape.graphics.curveTo(175, 125, 200, 200);
The following example draws red and green circular objects with a width and height of 100 pixels. Note that due to the
nature of the quadratic Bézier equation, these are not perfect circles:
Last updated 6/6/2012
224