AS3绘制扇形算法解析

浏览数：265 / 时间：2015年06月08日

网上有很多使用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绘制扇形算法解析