您的位置:首页 > 其它

flash绘图API:雷达

2010-12-07 18:44 246 查看






利用绘图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();
		}
	}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: