drawPath() Circle Segment

drawPath() is flash 10 player only

[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:

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.