flash绘图API：雷达

 

 

 

 

 利用绘图API 绘制和制作一个雷达效果，看起来也十分好玩，采取的办法比较老套，我们只是需要绘制底部的圆和周边的线即可以实现这种效果。看起来会像雷达扫描那样。而扫描那个扇形则采用扇形的绘制方式实现。而制作过程当中，可以加入了旋转的动画，使flash动画看起来不会显得那么单调。

 

整个过程所需要的知道就是仅仅绘制扇形的办法，通过改变扇形的形状可以实现一个变大和变小的动画效果。而这次，使用了三角函数当中的方式来实现递增递减角度来实现。

 

-1<=sin<=1

所以利用这个特性可以实现出递增递减的状态变化。

有兴趣可以尝试一下。

 

package {import flash.display.*;import flash.events.*;import flash.geom.*;import flash.filters.*;import flash.text.*;public class Main extends Sprite{private var LineShape:Shape=new Shape();private var msg:TextField=new TextField();private var angle:int=0;public function Main(){drawCircle();//绘制底部的圆drawLineShape();//绘制扫描的线init_msg_info();addEventListener(Event.ENTER_FRAME,Run);}//绘制圆形底private function drawCircle():void{for (var i:int=0; i<10; i++){var shape:Shape=new Shape();addChild(shape);shape.x=stage.stageWidth*0.5;shape.y=stage.stageHeight*0.5;shape.graphics.lineStyle(0,0xffffff,0.8);shape.filters=[new GlowFilter(0x00ff00,1,1),new BlurFilter(1,1)];if (i<8){shape.graphics.drawCircle(0,0,25*i+5);}else{var rad:Number=25*(i-2)+5;var perAnagle:Number=2*Math.PI/10;for (var j:int=0; j<10; j++){shape.graphics.moveTo( 0,0);shape.graphics.lineTo( Math.cos(j*perAnagle)*rad,Math.sin(j*perAnagle)*rad);}}}}private function drawLineShape():void{addChild(LineShape);LineShape.x=stage.stageWidth*0.5;LineShape.y=stage.stageHeight*0.5;LineShape.graphics.beginFill(0xffffff,0.2);LineShape.graphics.moveTo(0,0);for (var i:int=0; i<45; i++){LineShape.graphics.lineTo(Math.cos(i*Math.PI/180)*180,Math.sin(i*Math.PI/180)*180);}LineShape.graphics.lineTo(0,0);LineShape.graphics.endFill();}//重绘构建扫描时候的状态private function redraw(angle:int):void{LineShape.graphics.clear();LineShape.graphics.beginFill(0xffffff,0.2);LineShape.graphics.moveTo(0,0);for (var i:int=0; i<angle; i++){LineShape.graphics.lineTo(Math.cos(i*Math.PI/180)*180,Math.sin(i*Math.PI/180)*180);}LineShape.graphics.lineTo(0,0);LineShape.graphics.endFill();}//显示角度信息private function init_msg_info():void{addChild(msg);var label:TextField=new TextField();//标签label.text="角度:";label.textColor=0xffffff;addChild(label);label.x=20;label.y=30;msg.textColor=0xffffff;msg.x=60;msg.y=30;}private function Run(event:Event):void{LineShape.rotation+=4;//角度旋转angle++;if (angle==180){angle=0;}var temp:int=45*Math.sin(angle*Math.PI/180);//redraw(temp);msg.text=LineShape.rotation.toString();}}}