Flash与数学：扇形

  生活当中很多扇形，这些扇形可以帮助我们制造很多应用。如之前当中的太极的做法，第二的方面，个人发现扇形可以制作一些动画。实现一个填充颜色的应用。做法很简单。

 

 我们先创建一个扇形。使用API绘制扇形。

查询过相关资料，发现网上有几种的方式 实现绘制扇形，而下面这种是通过描点的方式绘制。看看里面的参数包括图形对象，半径，开始角度，结束的角度（偏移角度），颜色填充。实现方式借助三角函数来实现。

 

function DrawSector(g:Graphics,radius:Number,startAngle:Number,endAngle:Number,color:uint):void { g.lineStyle(1); g.moveTo(0,0); g.beginFill(color); for (var i:int=startAngle; i<=endAngle; i++) { g.lineTo(radius*Math.cos(-i*Math.PI/180),radius*Math.sin(-i*Math.PI/180)); } g.endFill(); g.lineTo(0,0); }

 

这个函数并不完善，为什么这样说，因为我们在数学角度看，其实他在填充角度的时候，会有点限制。不过这个不影响我们去绘制一个扇形出来。

 

绘制扇形办法：

var pen:Sprite=new Sprite();
addChild(pen);

 

DrawSector(pen.graphics,50,0,180,0xFF8040); //按逆时针来运算。

 

扇形大概完成，从0度到180度进行偏移。绘制一个半圆。可以试试。

 

现在有了这个方式后，我们创建一个简单一点动画，扇形动画吧。他的偏移角度渐渐增大，动画就会产生了

var list:Array=new Array();//管理 for (var i:int=0; i<5; i++) { var pen:Sprite=new Sprite(); addChild(pen); pen.x=i*50+60*i+50; pen.y=200; list.push(pen); } var n:int=1; addEventListener(Event.ENTER_FRAME,Run); function Run(event:Event):void { n++; for (var i:int=0; i<list.length; i++) { list[i].graphics.clear(); DrawSector(list[i].graphics,50,0,n,0xFF8040); if (n==360) { n=0; } } } function DrawSector(g:Graphics,radius:Number,startAngle:Number,endAngle:Number,color:uint):void { g.lineStyle(1); g.moveTo(0,0); g.beginFill(color); for (var i:int=startAngle; i<=endAngle; i++) { g.lineTo(radius*Math.cos(-i*Math.PI/180),radius*Math.sin(-i*Math.PI/180)); } g.endFill(); g.lineTo(0,0); }

 

仅仅是一个补间的动画。若果再配搭文字，会产生不错结合应用，如加载的时候的数字。

 

 

 

修改添加文本：然后添加几张的背景图案。这样效果就能完成了。这里只是使用扇形的组合来制作一些动画。如果你有想法，也可以借用这个扇形来发挥你的创意实现更加更加的扇形组合。

var list:Array=new Array();//管理 var TextList:Array=new Array(); var colors:Array=[0xFF0000,0xFF8040,0xFFFF00,0x80FF00,0x00FFFF]; for (var i:int=0; i<4; i++) { var pen:Sprite=new Sprite(); addChild(pen); pen.y=i*50+10*i+100; pen.x=400; list.push(pen); var msg:TextField=new TextField(); addChild(msg); msg.width=200; msg.height=100; msg.y=i*50+10*i+85; msg.x=450; msg.text="0%"; TextList.push(msg); } var n:int=1; addEventListener(Event.ENTER_FRAME,Run); function Run(event:Event):void { n++; for (var i:int=0; i<list.length; i++) { list[i].graphics.clear(); DrawSector(list[i].graphics,30,0,n,colors[i]); TextList[i].text=Math.floor(n/360*100)+"%"; if (n==360) { n=0; } } } function DrawSector(g:Graphics,radius:Number,startAngle:Number,endAngle:Number,color:uint):void { g.lineStyle(1); g.moveTo(0,0); g.beginFill(color); for (var i:int=startAngle; i<=endAngle; i++) { g.lineTo(radius*Math.cos(-i*Math.PI/180),radius*Math.sin(-i*Math.PI/180)); } g.endFill(); g.lineTo(0,0); }

 

 

 

 

另外粘贴网上收集的另外两种绘制扇形的做法：

第一种比较好。

import flash.display.MovieClip; import flash.display.Sprite; var stag:Sprite=new Sprite(); addChild(stag); var moviec:MovieClip=new MovieClip; stag.addChild(moviec); var S_angle:int=180; DrawSector(moviec,200,200,100,S_angle,-90,0xffcc00); function DrawSector(mc:MovieClip,x:Number=200,y:Number=200,r:Number=100,angle:Number=27,startFrom:Number=270,color:Number=0xff0000):void { mc.graphics.beginFill(color,50); mc.graphics.lineStyle(0,0xff0000); 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=1; i<=n; i++) { startFrom+=angleA; var angleMid=startFrom-angleA/2; var bx=x+r/Math.cos(angleA/2)*Math.cos(angleMid); var by=y+r/Math.cos(angleA/2)*Math.sin(angleMid); var cx=x+r*Math.cos(startFrom); var cy=y+r*Math.sin(startFrom); mc.graphics.curveTo(bx,by,cx,cy); } if (angle!=360) { mc.graphics.lineTo(x,y); } mc.graphics.endFill(); }

 

 

第二种：也一样，

var fan:Shape = new Shape(); fan.x = fan.y = 200; addChild(fan); drawFan(100,180); function drawFan(radius:Number, angle:Number):void { fan.graphics.lineStyle(1); fan.graphics.beginFill(0xFF8000); fan.graphics.lineTo(radius,0); for (var i:int = angle; i >= 0; i--) { var degree:Number = -Math.PI / 180 * i; var targetPoint:Point = Point.polar(radius,degree); fan.graphics.lineTo(targetPoint.x, targetPoint.y); } fan.graphics.lineTo(0,0); fan.graphics.endFill(); }