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
|