Drawing Paths

The section on drawing lines and curves (see Drawing lines and curves) introduced the commands for drawing a single line (Graphics.lineTo()) or curve (Graphics.curveTo()) and then moving the line to another point (Graphics.moveTo()) to form a shape. Flash Player 10 and Adobe AIR 1.5 introduce support for ActionScript drawing API enhancements, like Graphics.drawPath().and Graphics.drawTriangles(), which utilize the existing drawing commands as parameters. So, a series of Graphics.lineTo(), Graphics.curveTo(), or Graphics.moveTo() commands are run in a single statement.

Two of the drawing API enhancements allow Graphics.drawPath() and Graphics.drawTriangles() to consolidate existing commands:

• The GraphicsPathCommand enumeration class: The GraphicsPathCommand class associates several drawing commands with constant values. You use a series of these values as parameters for the Graphics.drawPath() method. Then with a single command, you can render an entire shape, or several shapes. You can also dynamically alter the values passed to these methods to change an existing shape.

• Vector arrays: Vector arrays contain a series of values of a specific data type. So, you store a series of GraphicsPathCommand constants in a Vector object, and a series of coordinates in another Vector object. Graphics.drawPath() or Graphics.drawTriangles() assigns those values together to generate a drawing path or shape.

You no longer need separate commands for each segment of a shape. For example, the Graphics.drawPath() method consolidates Graphics.moveTo(), Graphics.lineTo(), and Graphics.curveTo() into a single method. Instead of each method called separately, they are abstracted into numeric identifiers as defined in the GraphicsPathCommand class. A moveTo() operation is signified by a 1, while a lineTo() operation is a 2. Store an array of these values in a Vector.<int> object for use in the commands parameter. Then, create another array containing coordinates in a Vector.<Number> object for the data parameter. Each GraphicsPathCommand value corresponds to the coordinate values stored in the data parameter where two consecutive numbers define a location in the target coordinate space.

The Graphics.drawPath() method matches each command with its respective point values (a collection of two or four numbers) to generate a path in the Graphics object:

package{ 
import flash.display.*; 
 
public class DrawPathExample extends Sprite { 
    public function DrawPathExample(){ 
 
    var square_commands:Vector.<int> = new Vector.<int>(5,true); 
    square_commands[0] = 1;//moveTo 
    square_commands[1] = 2;//lineTo 
    square_commands[2] = 2; 
    square_commands[3] = 2; 
    square_commands[4] = 2; 
 
    var square_coord:Vector.<Number> = new Vector.<Number>(10,true); 
    square_coord[0] = 20; //x 
    square_coord[1] = 10; //y 
    square_coord[2] = 50; 
    square_coord[3] = 10; 
    square_coord[4] = 50; 
    square_coord[5] = 40; 
    square_coord[6] = 20; 
    square_coord[7] = 40; 
    square_coord[8] = 20; 
    square_coord[9] = 10; 
 
    graphics.beginFill(0x442266);//set the color 
    graphics.drawPath(square_commands, square_coord); 
    } 
} 
}

In the above example, each command and coordinate pair is assigned individually to show their position in the array, but they can be assigned in a single statement. The following example draws the same star by assigning the values for each array in a single push() statement:

package{ 
import flash.display.*; 
 
public class DrawPathExample extends Sprite { 
    public function DrawPathExample(){ 
 
    var square_commands:Vector.<int> = new Vector.<int>(); 
    square_commands.push(1, 2, 2, 2, 2); 
    var square_coord:Vector.<Number> = new Vector.<Number>(); 
    square_coord.push(20,10, 50,10, 50,40, 20,40, 20,10); 
 
    graphics.beginFill(0x442266); 
    graphics.drawPath(square_commands, square_coord); 
    } 
} 
}