flash 绘图API：剑归宗

forked from: forked from: flash on 2010-2-24 - wonderfl build flash online

   昨晚想起了很想用绘图API绘制一把剑，突然脑海又想起了风云当中剑圣使用的“万剑归宗”这些武学招式，想想之后，于是好无聊写了一下，不过不能做到万剑归宗的效果，就省去了一个字。呵呵，很想把学过的知识，把在看到的融合到图形表现上。这样做起来flash 会显得更加有个性一点，可能看起来是一种自娱自乐的东西，不过里面的开心的是把一种已经存在的东西转化为新的东西。

既然万剑归宗，当然不能缺少一把剑。看看绘制一把剑，这把剑采用一种比较笨的方法，记录点的位置转化线条表现上。

 

第一步：绘制一把剑

把每一个点记录起来，然后大概使用一个数组里面保存。

array:Array=[ [50,0], [50,50], [20,50], [20,60], [45,60], [45,300], [65,330], [75,300], [75,60], [105,60], [105,50], [70,50], [70,0], [50,0] ];

 

记录之后，我们就可以对其进行连线，从第一个点开始连接，一个接一点进行连。采用moveTo 和lineTo 常用组合就能连串成每一个点位置

 

private function init():void { addChild(pen); pen.graphics.lineStyle(1,0x000000); pen.graphics.moveTo(array[0][0],array[0][1]); for (var i:int=0; i<array.length; i++) { pen.graphics.lineTo(array[i][0],array[i][1]); } pen.graphics.drawCircle(60,-11,12);//绘制剑中心 pen.graphics.drawCircle(60,60,14); pen.graphics.beginFill(0xff00ff); pen.graphics.drawCircle(60,60,5); pen.graphics.endFill(); pen.graphics.moveTo(60,60); pen.graphics.lineTo(65,330); pen.scaleX=pen.scaleY=0.3; }

 

然后为剑添加一些圆和一些线，效果图就是上面那张图片。

 

 

 

 

 

第二步：交互操作

实现剑的操作，无非就是复制一系列的对象，然后对其进行分布。实现剑围绕圆分布。

stage.addEventListener(MouseEvent.CLICK,onClick);
 private function onClick(event:MouseEvent):void

{

 

  //产生一系列的对象,对其对象进行分布处理，按圆的轨迹进行分布。

 

}

效果如下图

 

for (var i:int=0; i<num; i++) { var mysword:Sword=new Sword(); contain.addChild(mysword); mysword.x=mouseX+Math.cos(i*2*Math.PI/num)*150; mysword.y=mouseY+Math.sin(i*2*Math.PI/num)*150; list.push(mysword); var angle:Number=Math.atan2(mouseY-mysword.y,mouseX-mysword.x);//角度 mysword.angle=angle; mysword.rotation=angle*180/Math.PI-90; mysword.addEventListener(Event.ENTER_FRAME,Run);//进行运动 }

 

 

 

 

 

第三步：剑归宗

 将剑进行运动，向他的中心点进发。剑向一个方向线性运动。谈到运动就是需要我们常常使用的速度和位移改变。

vx=speed*Math.cosA;

vy=speed*Math.sinA;

速度是向量，它可以分解成两个不同方向的分速度。根据角度偏移了。

剑。x+=vx；

剑。y+=vy； 在每一帧的刷新下，剑会产生位移改变。

 

代码清单：

 

package { //剑归宗 import flash.display.Sprite; import flash.events.*; import flash.display.DisplayObject; public class Main extends Sprite { private var list:Array=new Array(); private var Speed:int=4;//飞行速度 private var contain:Sprite=new Sprite(); private var num:int=20; public function Main() { addChild(contain); stage.addEventListener(MouseEvent.CLICK,onClick); } //创建一把剑 private function onClick(event:MouseEvent):void { while (list.length>0) { list.pop(); } for (var i:int=0; i<num; i++) { var mysword:Sword=new Sword(); contain.addChild(mysword); mysword.x=mouseX+Math.cos(i*2*Math.PI/num)*150; mysword.y=mouseY+Math.sin(i*2*Math.PI/num)*150; list.push(mysword); var angle:Number=Math.atan2(mouseY-mysword.y,mouseX-mysword.x);//角度 mysword.angle=angle; mysword.rotation=angle*180/Math.PI-90; mysword.addEventListener(Event.ENTER_FRAME,Run);//进行运动 } } //运动 private function Run(event:Event):void { var vx:Number=Math.cos(event.currentTarget.angle)*Speed; var vy:Number=Math.sin(event.currentTarget.angle)*Speed; event.currentTarget.x+=vx; event.currentTarget.y+=vy; if (event.currentTarget.x>stage.stageWidth||event.currentTarget.x<0||event.currentTarget.y<0|| event.currentTarget.y>stage.stageHeight ) { if(event.currentTarget!=null) { event.currentTarget.removeEventListener(Event.ENTER_FRAME,Run); contain.removeChild(DisplayObject(event.currentTarget)); } } } } } import flash.display.Sprite; //描绘一把剑 internal class Sword extends Sprite { private var pen:Sprite=new Sprite(); public var angle:Number=0; private var array:Array=[ [50,0], [50,50], [20,50], [20,60], [45,60], [45,300], [65,330], [75,300], [75,60], [105,60], [105,50], [70,50], [70,0], [50,0] ]; public function Sword() { init(); } private function init():void { addChild(pen); pen.graphics.lineStyle(1,0x000000); pen.graphics.moveTo(array[0][0],array[0][1]); for (var i:int=0; i<array.length; i++) { pen.graphics.lineTo(array[i][0],array[i][1]); } pen.graphics.drawCircle(60,-11,12);//绘制剑中心 pen.graphics.drawCircle(60,60,14); pen.graphics.beginFill(0xff00ff); pen.graphics.drawCircle(60,60,5); pen.graphics.endFill(); pen.graphics.moveTo(60,60); pen.graphics.lineTo(65,330); pen.scaleX=pen.scaleY=0.3; } }

 

 

下面乱剑一堆哈哈。这一个和之前一篇关于粒子爆效果原理是一样的，采用Math.atan2的方法处理运动方面很多角度问题。应用很广泛

 

 

 

 

 

 

第四步：对剑的分布进行改造

有时候可以改变对图形的分布位置也能够创造出不一样的东西。采用圆 采用二维矩阵，都可以实现到。

下面是另外一个版本，采用的复制的手法不一样，有时候采用循环能够一次性看到全貌，但是有时候采用时间错开，会看到不一样的过程。Timer 类能够实现到时间错开的过程。我们可以对其进行改造看看效果如何

timer=new Timer(100);

 

timer.addEventListener(TimerEvent.TIMER,onTimer);

 

private function onTimer(event:TimerEvent):void

{

 

  按时间间隔创建对象，能够看到创建的过程。

}

 

 

下面为代码清单。

package { //剑归宗 import flash.display.Sprite; import flash.events.*; import flash.display.DisplayObject; import flash.utils.Timer; import flash.geom.Point; public class Main extends Sprite { private var list:Array=new Array(); private var Speed:int=10;//飞行速度 private var contain:Sprite=new Sprite(); private var num:int=20; private var timer:Timer; private var count:int=-1; private var key:Boolean=true; private var key2:Boolean=true; private var point:Point;//记录鼠标一个点 public function Main() { addChild(contain); stage.addEventListener(MouseEvent.CLICK,onClick); timer=new Timer(100); timer.addEventListener(TimerEvent.TIMER,onTimer); } private function onTimer(event:TimerEvent):void { count++; var mysword:Sword=new Sword(); contain.addChild(mysword); //mysword.x=point.x+Math.cos(count*2*Math.PI/num)*150; //mysword.y=point.y+Math.sin(count*2*Math.PI/num)*150; mysword.x=50+Math.random()*60; mysword.y=(count+1)*20; list.push(mysword); var angle:Number=Math.atan2(point.y-mysword.y,point.x-mysword.x);//角度 mysword.angle=angle; //mysword.rotation=angle*180/Math.PI-90; mysword.rotation=-90; if (count==num) { timer.stop(); key=true; count=-1; point=null; for (var i:int=0; i<=num; i++) { list[i].addEventListener(Event.ENTER_FRAME,Run);//进行运动 } } } //创建一把剑 private function onClick(event:MouseEvent):void { if (key) { while (list.length>0) { list.pop(); } timer.start(); key=false; point=new Point(event.localX ,event.localY);//记录坐标点的位置 } //for (var i:int=0; i<num; i++) //{ //var mysword:Sword=new Sword(); //contain.addChild(mysword); //mysword.x=mouseX+Math.cos(i*2*Math.PI/num)*150; //mysword.y=mouseY+Math.sin(i*2*Math.PI/num)*150; //list.push(mysword); //var angle:Number=Math.atan2(mouseY-mysword.y,mouseX-mysword.x);//角度 //mysword.angle=angle; //mysword.rotation=angle*180/Math.PI-90; //mysword.addEventListener(Event.ENTER_FRAME,Run);//进行运动 //} } //运动 private function Run(event:Event):void { var vx:Number=Math.cos(event.currentTarget.angle)*Speed; var vy:Number=Math.sin(event.currentTarget.angle)*Speed; event.currentTarget.x+=vx; event.currentTarget.y+=vy; if (event.currentTarget.x>stage.stageWidth||event.currentTarget.x<0||event.currentTarget.y<0|| event.currentTarget.y>stage.stageHeight ) { if (event.currentTarget!=null) { event.currentTarget.removeEventListener(Event.ENTER_FRAME,Run); contain.removeChild(DisplayObject(event.currentTarget)); } } } } } import flash.display.Sprite; //描绘一把剑 internal class Sword extends Sprite { private var pen:Sprite=new Sprite(); public var angle:Number=0; private var array:Array=[ [50,0], [50,50], [20,50], [20,60], [45,60], [45,300], [65,330], [75,300], [75,60], [105,60], [105,50], [70,50], [70,0], [50,0] ]; public function Sword() { init(); } private function init():void { addChild(pen); pen.graphics.lineStyle(1,0xffffff); pen.graphics.moveTo(array[0][0],array[0][1]); for (var i:int=0; i<array.length; i++) { pen.graphics.lineTo(array[i][0],array[i][1]); } pen.graphics.drawCircle(60,-11,12);//绘制剑中心 pen.graphics.drawCircle(60,60,14); pen.graphics.beginFill(0xff00ff); pen.graphics.drawCircle(60,60,5); pen.graphics.endFill(); pen.graphics.moveTo(60,60); pen.graphics.lineTo(65,330); pen.scaleX=pen.scaleY=0.3; } }