Using graphics data classes
The enhanced drawing API includes a set of classes in the openfl.display package that implement the IGraphicsData interface. These classes act as value objects (data containers) that represent the drawing methods of the drawing API.
The following classes implement the IGraphicsData interface:
With these classes, you can store a complete drawing in a Vector object of IGraphicsData type (Vector
Notice you have multiple fill classes for each style of fill, but only one stroke class. OpenFL has only one stroke IGraphicsData class because the stroke class uses the fill classes to define its style. So every stroke is actually defined by a combination of the stroke class and a fill class. Otherwise, the API for these graphics data classes mirror the methods they represent in the openfl.display.Graphics class:
|Graphics Method||Corresponding Class|
||GraphicsStroke + GraphicsBitmapFill|
||GraphicsStroke + GraphicsGradientFill|
||GraphicsStroke + GraphicsShaderFill|
||GraphicsStroke + GraphicsSolidFill|
In addition, the GraphicsPath class has its own
GraphicsPath.wideMoveTo() utility methods to easily define those commands for a GraphicsPath instance. These utility methods simplify the task of defining or updating the commands and data values directly.
Drawing with vector graphics data
Once you have a collection of IGraphicsData instances, use the Graphics class’s
drawGraphicsData() method to render the graphics. The
drawGraphicsData() method carries out a set of drawing instructions from a vector of IGraphicsData instances in sequential order:
// stroke object var stroke = new GraphicsStroke (3); stroke.joints = JointStyle.MITER; stroke.fill = new GraphicsSolidFill (0x102020); // solid stroke // fill object var fill = new GraphicsGradientFill (); fill.colors = [0x0000FF, 0xEEFFEE]; fill.matrix = new Matrix (); fill.matrix.createGradientBox (70, 70, Math.PI/2); // path object var path = new GraphicsPath (new Vector<Int> (), new Vector<Float> ()); path.commands.push (GraphicsPathCommand.MOVE_TO, GraphicsPathCommand.LINE_TO, GraphicsPathCommand.LINE_TO); path.data.push (125, 0, 50, 100, 175, 0); // combine objects for complete drawing var drawing = new Vector<IGraphicsData> (); 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 += 200; graphics.drawGraphicsData (drawing); path.data -= 150; graphics.drawGraphicsData (drawing); path.data += 100; graphics.drawGraphicsData (drawing); path.data -= 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
Reading vector graphics data
In addition to drawing vector content to a display object, you can use the Graphics class’s
readGraphicsData() method to obtain a data representation of the vector graphics content of a display object. This can be used to create a snapshot of a graphic to save, copy, create a spritesheet at run time, and more.
readGraphicsData() method returns a Vector instance containing IGraphicsData objects. These are the same objects used to draw vector graphics with the
There are several limitations to reading vector graphics with the
readGraphicsData() method. For more information, see the readGraphicsData() entry in the API Reference.