Recipe 7.3. Drawing a Line

Problem

You want to draw a line using ActionScript.

Solution

Use the Graphics.lineTo( ) method to draw a line from the current pen location to a destination point.

Discussion

The most basic type of drawing that you can do with ActionScript is a straight line. Flash uses the current pen location as the starting point, so you need to provide only the coordinates of the destination point. Use the Grahics.lineTo( ) method to create a line from the current pen location to the specified destination point:

// Draws a line from the current pen position to (100,100) // within the coordinate system of sampleSprite. sampleSprite.graphics.lineTo(100, 100);

When ActionScript methods are used to draw, all the lines and fills are drawn within the display object associated with the Graphics object from which the methods are invoked. For example, in the preceding code, the line is drawn within sampleSprite.

As mentioned previously, when you use the Drawing API methods such as lineTo( ), Flash draws the line beginning at the current pen location. If you have not otherwise moved the pen (by calling a lineTo( ), curveTo( ), or moveTo( ) method, for example) the pen is positioned at the origin of the display object's coordinate system, point (0,0). You can move the pen without drawing a line by using the moveTo( ) method. The moveTo( ) method simply relocates the pen to the coordinate you specify; it does not draw any lines:

// Move the pen in sampleSprite to (200,20) sampleSprite.graphics.moveTo(200, 20);

The moveTo( ) method is important in situations in which you want to either begin drawing from a point other than the display object's center or draw lines or shapes without necessarily connecting all the lines:

// Set a 1-pixel, black, completely opaque line style sampleSprite.graphics.lineStyle(  ); // Draw a dashed line using a series of lines and spaces sampleSprite.graphics.lineTo(10, 0); sampleSprite.graphics.moveTo(15, 0); sampleSprite.graphics.lineTo(25, 0); sampleSprite.graphics.moveTo(30, 0); sampleSprite.graphics.lineTo(40, 0); sampleSprite.graphics.moveTo(45, 0); sampleSprite.graphics.lineTo(55, 0);

As noted in Recipe 7.1, you can change the line style between drawing line or curve segments. So while the preceding code draws four black line segments, the following code draws four line segments of different colors:

// Set a 1-pixel, black, completely opaque line style sampleSprite.graphics.lineStyle(  ); // Draw a dashed line using a series of lines and spaces sampleSprite.graphics.lineTo(10, 0); sampleSprite.graphics.moveTo(15, 0); // Change the color of the line to blue sampleSprite.graphics.lineStyle(1, 0x0000FF); sampleSprite.graphics.lineTo(25, 0); sampleSprite.graphics.moveTo(30, 0); // Change the color of the line to green sampleSprite.graphics.lineStyle(1, 0x00FF00); sampleSprite.graphics.lineTo(40, 0); sampleSprite.graphics.moveTo(45, 0); // Change the color of the line to red sampleSprite.graphics.lineStyle(1, 0xFF0000); sampleSprite.graphics.lineTo(55, 0);

The Pen.drawLine( ) method is useful when you want to draw lines from one specific coordinate to another. For example, an example showed you how to draw a series of line segments to create a dashed line. Using a Pen object, that code can be simplified as follows:

var pen:Pen = new Pen(sampleSprite.graphics); // Draw a dashed line using a series of lines segments pen.drawLine(0, 0, 10, 0); pen.drawLine(15, 0, 25, 0); pen.drawLine(30, 0, 40, 0); pen.drawLine(45, 0, 55, 0);

See Also

Recipe 7.1