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.4 Drawing a Line

Problem

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

Solution

Use the moveTo() and lineTo() methods of the Graphics class.

Discussion

Drawing a line works the same way it does with pen and paper. First, you place your pen at the first point of the line. If you don’t take this first step in Flash, the line begins at the origin (0, 0) of the display object, such as the registration point of a parent sprite or even the top-left corner of the Flash stage. Also like pen and paper, combining moveTo() and lineTo() method calls in your scripts lets you draw complex shapes without creating one continuous line.



To draw a line on the stage from point (100, 100), to point (300, 100), use the following code:

var g:Graphics = this.graphics;
g.lineStyle(1, 0x0000FF);
g.moveTo(100,100);
g.lineTo(300,100);

In most cases, you have greater control if you draw into a container display object so you can easily manipulate your sprite or movie clip as a whole. When drawing onto the sprite or movie clip, the registration point of assets drawn into the display object is (0, 0), regardless of the display object’s x and y coordinates on the stage, because the drawn assets inside are relative to the display object’s coordinate space, not that of the stage. So, you’re better off achieving the previous goal of drawing a line on the stage from (100, 100) to (300, 100) by drawing a line from (0, 0) to (200, 0), and positioning the display object.

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

Note

In this case, because you want the line to begin from the relative origin point of (0, 0), you can omit the moveTo() method call.

To demonstrate the ease with which you can now manipulate the drawn assets as a whole, the following line will rotate the container sprite 45 degrees, thus rotating the line inside.

sp.rotation = 45;

See Also

the section called “12.6 Defining a Fill Style” for a demonstration of using multiple lineTo() commands to create a triangle.

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

Next Pagearrow