{"id":152,"date":"2009-01-12T00:00:22","date_gmt":"2009-01-12T07:00:22","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=511"},"modified":"2009-01-12T00:00:22","modified_gmt":"2009-01-12T07:00:22","slug":"bezier-skin-smooth-curveto","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=152","title":{"rendered":"Bezier Skin (smooth curveTo())"},"content":{"rendered":"
\r\n\/\/ graphics, vector of xy coords, closed boolean\r\nfunction bezierSkin(g:Graphics, bez:Vector.<Number>, closed:Boolean = true):void {\r\n\tvar avg:Vector.<Number> = calcAvgs(bez);\r\n\tvar i:int, n:int;\r\n\tvar leng:int = bez.length;\r\n\r\n\tif (closed){\r\n\t\tg.moveTo(avg[0], avg[1]);\r\n\t\tfor (i = 2; i < leng; i+=2) {\r\n\t\t\tn=i+1;\r\n\t\t\tg.curveTo(bez[i], bez[n], avg[i], avg[n]);\r\n\t\t}\r\n\t\tg.curveTo(bez[0], bez[1], avg[0], avg[1]);\r\n\t}else{\r\n\t\tg.moveTo(bez[0], bez[1]);\r\n\t    g.lineTo(avg[0], avg[1]);\r\n\t\tfor (i = 2; i < leng-2; i+=2) {\r\n\t\t\tn=i+1;\r\n\t\t\tg.curveTo(bez[i], bez[n], avg[i], avg[n]);\r\n\t\t}\r\n\t\tg.lineTo(bez[ leng - 2], bez[ leng - 1]);\r\n\t}\r\n}\r\n\r\n\/\/ create anchor points by averaging the control points\r\nfunction calcAvgs(v:Vector.<Number>):Vector.<Number> {\r\n\tvar avg:Vector.<Number> = new Vector.<Number>();\r\n\tvar leng:int=v.length;\r\n\tfor (var i:int = 2; i<leng; i+=1) {\r\n\t\tvar prev:Number=i-2;\r\n\t\tavg.push( (v[prev] + v[i]) \/ 2 );\r\n\t}\r\n\t\/\/ close\r\n\tavg.push( (v[0] + v[ leng - 2]) \/ 2 );\r\n\tavg.push( (v[1] + v[ leng - 1]) \/ 2 );\r\n\treturn avg;\r\n}\r\n\r\n\/\/ test out the functions:\r\n\r\ngraphics.lineStyle(0,0x000000);\r\n\r\n\/\/ draw a very rounded rect\r\nbezierSkin(graphics, Vector.<Number>([100,100,200,100,200,200,100,200]) );\r\n\r\n\/\/ draw a random curve with 10 xy coords\r\nvar rnd:Vector.<Number> = new Vector.<Number>();\r\nfor (var i:int = 0; i<20; i++) rnd.push(Math.random()*100);\r\nbezierSkin(graphics, rnd);\r\n\t\t\t\t\t\t\r\n\/\/ erase everything and allow the used to draw a smooth curve with the mouse\r\nstage.addEventListener(MouseEvent.MOUSE_DOWN, onLoop);\r\nvar index:int = 0;\r\nvar pnts:Vector.<Number> = new Vector.<Number>();\r\n\r\nfunction onLoop(evt:MouseEvent):void {\r\n\t pnts.push(mouseX);\r\n\t pnts.push(mouseY);\r\n\t\r\n     graphics.clear();\r\n\t graphics.lineStyle(0,0x000000);\r\n\t \r\n\t  \/\/ draw a smooth curved line\r\n\t bezierSkin(graphics,pnts,false);\r\n}\r\n<\/pre>\n
The above code uses averaging to generate anchor points for curveTo() calls. This is an easy way to always draw smooth curves.<\/p>\n
This is an old one that I’ve seen floating around since the drawing api first came out… but I it’s an important snippet, so I figured I’d post it. <\/p>\n","protected":false},"excerpt":{"rendered":"
\/\/ graphics, vector of xy coords, closed boolean function bezierSkin(g:Graphics, bez:Vector.<Number>, closed:Boolean = true):void { var avg:Vector.<Number> = calcAvgs(bez); var i:int, n:int; var leng:int = bez.length; if (closed){ g.moveTo(avg[0], avg[1]); for (i = 2; i < leng; i+=2) { n=i+1; g.curveTo(bez[i], bez[n], avg[i], avg[n]); } g.curveTo(bez[0], bez[1], avg[0], avg[1]); }else{ g.moveTo(bez[0], bez[1]); g.lineTo(avg[0], avg[1]); for […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,33],"tags":[3,117,4],"class_list":["post-152","post","type-post","status-publish","format-standard","hentry","category-bezier","category-graphics","tag-actionscript","tag-bezier","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/152","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=152"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/152\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}