Flash Player 10: Drawing API — Part IV

For those of you who thought I had forgotten about you… here is the 4th delivery of this astonishing post.

Enjoy!

Source: http://bit.ly/yMloW

New Graphics Data Classes

Along with new methods available in the Graphics class, a new collection of classes of the type IGraphicsData (an interface each of the classes implement) have been created to serve as data containers for the methods of the drawing API. These classes include:

• GraphicsBitmapFill
• GraphicsEndFill
• GraphicsGradientFill
• GraphicsPath
• GraphicsShaderFill
• GraphicsSolidFill
• GraphicsStroke
• GraphicsTrianglePath

The idea behind these classes is that you can store complete drawings in list (Vector.<IGraphicsData>) that can be passed around as data and reused with any target. This also makes it really easy to save drawings for use at a later time.

You may notice that there are multiple fill classes for each style of fill, but only one stroke class. This is because the stroke class actually uses the fill classes to define its style. So every stroke is actually made up of the stroke class and a fill class. Other than that, the API for these classes mirror the methods they represent. The basic run down of Graphics methods to these classes is as follows:

Method	Class
beginFill	GraphicsSolidFill
beginBitmapFill	GraphicsBitmapFill
beginGradientFill	GraphicsGradientFill
beginShaderFill	GraphicsShaderFill
lineStyle	GraphicsStroke + GraphicsSolidFill
lineBitmapStyle	GraphicsStroke + GraphicsBitmapFill
lineGradientStyle	GraphicsStroke + GraphicsGradientFill
lineShaderStyle	GraphicsStroke + GraphicsShaderFill
moveTo lineTo curveTo drawPath	GraphicsPath
drawTriangles	GraphicsTrianglePath

In addition, the GraphicsPath class has moveTo, lineTo, curveTo, wideLineTo, and wideMoveTo utility methods to easily define those commands for a GraphicsPath instance. This can ease the pain of trying to define or update the commands and data values directly.

Unfortunately, there are no equivalents to drawCircle, drawEllipse, drawRect, or drawRoundedRect. These would have to be drawn into a GraphicsPath instance using lineTo and curveTo or by supplying the data manually.

Once you have a collection of IGraphicsData instances, you can draw them through the Graphics method, drawGraphicsData. This method takes a vector of IGraphicsData instances and runs them through the drawing API in sequential order.

Example:

// 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.<int>(), new Vector.<Number>());
path.commands.push(1,2,2);
path.data.push(125,0, 50,100, 175,0);

// combine objects for complete drawing
var drawing:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
drawing.push(stroke, fill, path);

// 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;
graphics.drawGraphicsData(drawing);

In the example above, the original drawing definition only drew one of the icicle shapes. By modifying one value in the path used by the drawing, it could be redrawn multiple times for a more complex image.

Though IGraphicsData objects can define fill and stroke styles, they dont have to. Graphics class methods can be used to style while IGraphicsData objects can be used to draw a saved collection of paths, or vise versa. They work together all the same.

You may have also noticed that there is no clear object. The clear method remains solely as a method of the Graphics class. It is also still required to clear out a previous drawing before starting a new one, unless you”re adding on to the original, as seen in the example above. Though you can change a single portion of a path or collection of IGraphicsData objects that make up a drawing, that entire drawing will have to be redrawn from scratch for those changes to be made visible. Nevertheless, having object representations of your drawing greatly simplify the ability to modify or even animate dynamic graphics.

 

 

 

 
To Be Continued...

 

 

 

 

Comments