AS3绘制扇形算法解析
网上有很多使用AS3画一个扇形的方法,但是却一个都没有解释这个函数是如何运作来画出扇形的,下面浅谈下我对这个函数的理解。
首先上代码,代码来自http://blog.csdn.net/weiming8517/article/details/12023411。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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一点点的地方。所以说这个函数方法只是相似的画了一个扇形。