首页 > 代码库 > AS3绘制扇形算法解析
AS3绘制扇形算法解析
网上有很多使用AS3画一个扇形的方法，但是却一个都没有解释这个函数是如何运作来画出扇形的，下面浅谈下我对这个函数的理解。
首先上代码，代码来自http://blog.csdn.net/weiming8517/article/details/12023411。
private function drawSector(mc:Sprite, x:Number = 200, y:Number = 200, r:Number = 100, angle:Number = 60, startFrom:Number = 0, color:uint = 0x000000):void { mc.graphics.clear(); mc.graphics.beginFill(color,50); mc.graphics.lineStyle(0,color); mc.graphics.moveTo(x,y); angle=(Math.abs(angle)>360)?360:angle; var n:Number=Math.ceil(Math.abs(angle)/45); var angleA:Number=angle/n; angleA=angleA*Math.PI/180; startFrom=startFrom*Math.PI/180; mc.graphics.lineTo(x+r*Math.cos(startFrom),y+r*Math.sin(startFrom)); for(var i:int = 1;i <= n;i++) { startFrom+=angleA; var angleMid:Number = startFrom-angleA/2; var bx:Number=x+r/Math.cos(angleA/2)*Math.cos(angleMid); var by:Number=y+r/Math.cos(angleA/2)*Math.sin(angleMid); var cx:Number=x+r*Math.cos(startFrom); var cy:Number=y+r*Math.sin(startFrom); mc.graphics.curveTo(bx,by,cx,cy); } if(angle!=360) { mc.graphics.lineTo(x,y); } mc.graphics.endFill(); }
其中，angle是我用60度，起始点是(200,200)，半径100，从右开始画，这样可以理解的容易些。
第一步，把要画的扇形角度等份分解成几个小部分，每部分不超过45度，同时因为等份分解，每部分的弧度也就相等，这里分成了2个30度。
第二步，对每个小部分绘制贝塞尔曲线，曲线需要3个点：起点，控制点，终点。
起点即当前绘图位置，第一次调用时，当前绘图位置在(300,200)，图中起点是D点。
终点即这次小部分绘制中，最后要到达的点，图中终点是E点。
控制点是用来控制曲线弯曲的程度，曲线不会经过控制点，只会达到控制点与（起点与终点的连线即直线DE）的垂线的一半，图中C是控制点。
从图中可见，绿色线表示扇形的弧线，弧线最远也只达到C点的一半，这样这一部分的扇形就画好了。
PS:请无视图中的Y坐标，这是几何画板里的直角坐标系，非flash坐标系
第三步，重复第二步的过程，直到角度全画完。
第四步，返回最开始的起点（200,200），绘制完成。
补充：这个方法画的扇形其实还是有点误差的，图中的绿色弧线是圆的一部分，O是圆点，所以OD=OB=OE=100,角DOE是30度,OC垂直DE，CD垂直OD，可以轻松算出OA长度是100*cos(15度)，OC长度是100/cos（15度），然后就可得出AB、BC的长度很相近但是不相等的，而贝塞尔曲线的控制点C是在AB延长线上且AB‘=B‘C，所以B‘会是比图中的B更靠近A一点点的地方。所以说这个函数方法只是相似的画了一个扇形。
AS3绘制扇形算法解析