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(); } } }