drawPath() Circle Segment

drawPath() is flash 10 player only

Actionscript:
  1. [SWF(width=400,height=400,backgroundColor=0xEFEFEF,frameRate=30)]
  2.  
  3. const TWO_PI:Number = Math.PI * 2;
  4.  
  5. var resolution:Number = 50;
  6. var step:Number = TWO_PI / resolution;
  7. var maxIndex:int = 0;
  8.  
  9. var coords:Vector.<Number> = new Vector.<Number>();
  10. var drawCommands:Vector.<int> = new Vector.<int>();
  11.  
  12. // populate vectors
  13. for (var i:Number = 0; i <TWO_PI + step; i += step){
  14.     coords.push(100 * Math.cos(i));
  15.     coords.push(100 * Math.sin(i));
  16.     drawCommands.push(GraphicsPathCommand.LINE_TO);
  17. }
  18.  
  19. var circleSegment:Shape = new Shape();
  20. circleSegment.x = circleSegment.y = 200;
  21. addChild(circleSegment);
  22.  
  23. addEventListener(Event.ENTER_FRAME, onLoop);
  24. function onLoop(evt:Event):void {
  25.     with (circleSegment.graphics) {
  26.         clear();
  27.         beginFill(0x000000);
  28.        
  29.         // count by two, up to coords.length (drawCommands is exactly half the length of coords)
  30.         maxIndex =  Math.ceil((mouseX / stage.stageWidth)  * drawCommands.length) * 2;
  31.  
  32.         drawPath(drawCommands, coords.slice(0, maxIndex));
  33.     }
  34. }

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:
  1. const TWO_PI:Number = Math.PI * 2;
  2.  
  3. var resolution:Number = 50;
  4. var step:Number = TWO_PI / resolution;
  5. var maxAngle:Number;
  6.  
  7. var circleSegment:Shape = new Shape();
  8. circleSegment.x = circleSegment.y = 200;
  9. addChild(circleSegment);
  10.  
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12. function onLoop(evt:Event):void {
  13.     with (circleSegment.graphics) {
  14.         clear();
  15.         beginFill(0x000000);
  16.        
  17.         // count up to (TWO_PI + step), we add step to close the circle
  18.         maxAngle =  (TWO_PI + step) *  (mouseX / stage.stageWidth);
  19.  
  20.         for (var i:Number = 0; i <maxAngle; i += step) {
  21.             var xp:Number = 100 * Math.cos(i);
  22.             var yp:Number = 100 * Math.sin(i);
  23.             lineTo(xp, yp);
  24.         }
  25.     }
  26. }

If your interested in learning more about the FP10 Drawing API features, you can read more here.

This entry was posted in Graphics, Vector and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*