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. The Graphics.drawPath() and Graphics.drawTriangles() methods accept a set of objects representing those same drawing commands as a parameter. With these methods, you can provide a series of Graphics.lineTo(), Graphics.curveTo(), or Graphics.moveTo() commands for the Flash runtime to execute in a single statement.

The GraphicsPathCommand enumeration class defines a set of constants that correspond to drawing commands. You pass a series of these constants (wrapped in a Vector instance) as a parameter for the Graphics.drawPath() method. Then with a single command you can render an entire shape, or several shapes. You can also alter the values passed to these methods to change an existing shape.

In addition to the Vector of drawing commands, the drawPath() method needs a set of coordinates that correspond to the coordinates for each drawing command. Create a Vector instance containing coordinates (Number instances) and pass it to the drawPath() method as the second (data) argument.

Note: The values in the vector are not Point objects; the vector is a series of numbers where each group of two numbers represents an x/y coordinate pair.

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 squareCommands:Vector.<int> = new Vector.<int>(5, true);
            squareCommands[0] = GraphicsPathCommand.MOVE_TO;
            squareCommands[1] = GraphicsPathCommand.LINE_TO;
            squareCommands[2] = GraphicsPathCommand.LINE_TO;
            squareCommands[3] = GraphicsPathCommand.LINE_TO;
            squareCommands[4] = GraphicsPathCommand.LINE_TO;

            var squareCoord:Vector.<Number> = new Vector.<Number>(10, true);
            squareCoord[0] = 20; //x
            squareCoord[1] = 10; //y
            squareCoord[2] = 50;
            squareCoord[3] = 10;
            squareCoord[4] = 50;
            squareCoord[5] = 40;
            squareCoord[6] = 20;
            squareCoord[7] = 40;
            squareCoord[8] = 20;
            squareCoord[9] = 10;

            graphics.beginFill(0x442266);//set the color
            graphics.drawPath(squareCommands, squareCoord);
        }
    }
}