ACTIONSCRIPT 3 Developer’s Guide en

ACTIONSCRIPT 3.0 DEVELOPER’S GUIDE
Using the drawing API
In addition, the GraphicsPath class has its own GraphicsPath.moveTo(), GraphicsPath.lineTo(),
GraphicsPath.curveTo(), GraphicsPath.wideLineTo(), and GraphicsPath.wideMoveTo() utility methods to
easily define those commands for a GraphicsPath instance. These utility methods ease defining or updating the
commands and data values directly.
Once you have a collection of IGraphicsData instances, use Graphics.drawGraphicsData() method to render the
graphics. The Graphics.drawGraphicsData() method runs a vector of IGraphicsData instances through the
drawing API in sequential order:
// stroke object
var stroke:GraphicsStroke = new GraphicsStroke(3);
stroke.joints = JointStyle.MITER;
stroke.fill = new GraphicsSolidFill(0x102020);// solid stroke
// fill object
var fill:GraphicsGradientFill = new GraphicsGradientFill();
fill.colors = [0x0000FF, 0xEEFFEE];
fill.matrix = new Matrix();
fill.matrix.createGradientBox(70,70, Math.PI/2);
// path object
var path:GraphicsPath = new GraphicsPath(new Vector.(), new Vector.());
path.commands.push(1,2,2);
path.data.push(125,0, 50,100, 175,0);
// combine objects for complete drawing
var drawing:Vector. = new Vector.();
drawing.push(stroke, fill, path);
// draw the drawing
graphics.drawGraphicsData(drawing);
By modifying one value in the path used by the drawing in the example, the shape can be redrawn multiple times for
a more complex image:
// draw the drawing multiple times
// change one value to modify each variation
graphics.drawGraphicsData(drawing);
path.data[2] += 200;
graphics.drawGraphicsData(drawing);
path.data[2] -= 150;
graphics.drawGraphicsData(drawing);
path.data[2] += 100;
graphics.drawGraphicsData(drawing);
path.data[2] -= 50;graphicsS.drawGraphicsData(drawing);
Though IGraphicsData objects can define fill and stroke styles, the fill and stroke styles are not a requirement. In other
words, Graphics class methods can be used to set styles while IGraphicsData objects can be used to draw a saved
collection of paths, or vice-versa.
Note: Use the Graphics.clear() method to clear out a previous drawing before starting a new one; unless you're adding
on to the original drawing, as seen in the example above. As you change a single portion of a path or collection of
IGraphicsData objects, redraw the entire drawing to see the changes.
When using graphics data classes, the fill is rendered whenever three or more points are drawn, because the shape is
inherently closed at that point. Even though the fill closes, the stroke does not, and this behavior is different than when
using multiple Graphics.lineTo() or Graphics.moveTo() commands.
Last updated 6/6/2012
240