drawPath() is flash 10 player only
Actionscript:
-
[SWF(width=400,height=400,backgroundColor=0xEFEFEF,frameRate=30)]
-
-
const TWO_PI:Number = Math.PI * 2;
-
-
var resolution:Number = 50;
-
var step:Number = TWO_PI / resolution;
-
var maxIndex:int = 0;
-
-
var coords:Vector.<Number> = new Vector.<Number>();
-
var drawCommands:Vector.<int> = new Vector.<int>();
-
-
// populate vectors
-
for (var i:Number = 0; i <TWO_PI + step; i += step){
-
coords.push(100 * Math.cos(i));
-
coords.push(100 * Math.sin(i));
-
drawCommands.push(GraphicsPathCommand.LINE_TO);
-
}
-
-
var circleSegment:Shape = new Shape();
-
circleSegment.x = circleSegment.y = 200;
-
addChild(circleSegment);
-
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
with (circleSegment.graphics) {
-
clear();
-
beginFill(0x000000);
-
-
// count by two, up to coords.length (drawCommands is exactly half the length of coords)
-
maxIndex = Math.ceil((mouseX / stage.stageWidth) * drawCommands.length) * 2;
-
-
drawPath(drawCommands, coords.slice(0, maxIndex));
-
}
-
}
The new additions to the Drawing API are great. This is just a quick test done with drawPath() to create a circle segment - this technique could be used to draw a pie chart.
The old way would have required lots of calls to the Graphics.lineTo() method. Take a look:
Actionscript:
-
const TWO_PI:Number = Math.PI * 2;
-
-
var resolution:Number = 50;
-
var step:Number = TWO_PI / resolution;
-
var maxAngle:Number;
-
-
var circleSegment:Shape = new Shape();
-
circleSegment.x = circleSegment.y = 200;
-
addChild(circleSegment);
-
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
with (circleSegment.graphics) {
-
clear();
-
beginFill(0x000000);
-
-
// count up to (TWO_PI + step), we add step to close the circle
-
maxAngle = (TWO_PI + step) * (mouseX / stage.stageWidth);
-
-
for (var i:Number = 0; i <maxAngle; i += step) {
-
var xp:Number = 100 * Math.cos(i);
-
var yp:Number = 100 * Math.sin(i);
-
lineTo(xp, yp);
-
}
-
}
-
}
If your interested in learning more about the FP10 Drawing API features, you can read more here.