{"id":111,"date":"2008-12-02T00:00:51","date_gmt":"2008-12-02T07:00:51","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=281"},"modified":"2008-12-02T00:00:51","modified_gmt":"2008-12-02T07:00:51","slug":"drawpath-circle-segment","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=111","title":{"rendered":"drawPath() Circle Segment"},"content":{"rendered":"<p>drawPath() is flash 10 player only<\/p>\n<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\n&#x5B;SWF(width=400,height=400,backgroundColor=0xEFEFEF,frameRate=30)]\r\n\r\nconst TWO_PI:Number = Math.PI * 2;\r\n\r\nvar resolution:Number = 50;\r\nvar step:Number = TWO_PI \/ resolution;\r\nvar maxIndex:int = 0;\r\n\r\nvar coords:Vector.&lt;Number&gt; = new Vector.&lt;Number&gt;();\r\nvar drawCommands:Vector.&lt;int&gt; = new Vector.&lt;int&gt;();\r\n\r\n\/\/ populate vectors\r\nfor (var i:Number = 0; i &lt; TWO_PI + step; i += step){\r\n\tcoords.push(100 * Math.cos(i));\r\n\tcoords.push(100 * Math.sin(i));\r\n\tdrawCommands.push(GraphicsPathCommand.LINE_TO);\r\n}\r\n \r\nvar circleSegment:Shape = new Shape();\r\ncircleSegment.x = circleSegment.y = 200;\r\naddChild(circleSegment);\r\n\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\nfunction onLoop(evt:Event):void {\r\n\twith (circleSegment.graphics) {\r\n\t\tclear();\r\n\t\tbeginFill(0x000000);\r\n\t\t\r\n\t\t\/\/ count by two, up to coords.length (drawCommands is exactly half the length of coords)\r\n\t\tmaxIndex =  Math.ceil((mouseX \/ stage.stageWidth)  * drawCommands.length) * 2;\r\n\r\n        drawPath(drawCommands, coords.slice(0, maxIndex));\r\n\t}\r\n}\r\n<\/pre>\n<p>The new additions to the Drawing API are great. This is just a quick test done with drawPath() to create a circle segment &#8211; this technique could be used to draw a pie chart. <\/p>\n<p>The old way would have required lots of calls to the Graphics.lineTo() method. Take a look:<\/p>\n<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\n\r\nconst TWO_PI:Number = Math.PI * 2;\r\n\r\nvar resolution:Number = 50;\r\nvar step:Number = TWO_PI \/ resolution;\r\nvar maxAngle:Number;\r\n\r\nvar circleSegment:Shape = new Shape();\r\ncircleSegment.x = circleSegment.y = 200;\r\naddChild(circleSegment);\r\n\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\nfunction onLoop(evt:Event):void {\r\n\twith (circleSegment.graphics) {\r\n\t\tclear();\r\n\t\tbeginFill(0x000000);\r\n\t\t\r\n\t\t\/\/ count up to (TWO_PI + step), we add step to close the circle\r\n\t\tmaxAngle =  (TWO_PI + step) *  (mouseX \/ stage.stageWidth);\r\n\r\n\t\tfor (var i:Number = 0; i &lt; maxAngle; i += step) {\r\n\t\t\tvar xp:Number = 100 * Math.cos(i);\r\n\t\t\tvar yp:Number = 100 * Math.sin(i);\r\n\t\t\tlineTo(xp, yp);\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p>If your interested in learning more about the FP10 Drawing API features, you can read more <a href='http:\/\/www.senocular.com\/flash\/tutorials\/flash10drawingapi\/' target='_blank'>here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>drawPath() is flash 10 player only &#x5B;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.&lt;Number&gt; = new Vector.&lt;Number&gt;(); var drawCommands:Vector.&lt;int&gt; = new Vector.&lt;int&gt;(); \/\/ populate vectors for (var i:Number = 0; i &lt; TWO_PI + step; i += step){ coords.push(100 * [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,79],"tags":[3,80,4,81],"class_list":["post-111","post","type-post","status-publish","format-standard","hentry","category-graphics","category-vector","tag-actionscript","tag-drawpath","tag-flash","tag-flash-player-10"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=111"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/111\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}