flash绘图:flash 绘图API:剑归宗

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

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

　　第步:绘制把剑



　　把每个点记录起来然后大概使用个里面保存

　　　1.　.gif' />:Array=[　[50,0],　　
　　　2.　　　[50,50],　　
　　　3.　　　[20,50],　　
　　　4.　　　[20,60],　　
　　　5.　　　[45,60],　　
　　　6.　　　[45,300],　　
　　　7.　　　[65,330],　　
　　　8.　　　[75,300],　　
　　　9.　　　[75,60],　　
　　10.　　　[105,60],　　
　　11.　　　[105,50],　　
　　12.　　　[70,50],　　
　　13.　　　[70,0],　　
　　14.　　　[50,0]　　
　　15.　　];　　

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

　　　1.　private　function　init:void　　
　　　2.　　　　　{　　
　　　3.　　　　　　　　　addChild(pen);　　
　　　4.　　　　　　　　　pen.graphics.lineStyle(1,0x000000);　　
　　　5.　　　　　　　　　pen.graphics.moveTo(.gif' />[0][0],.gif' />[0][1]);　　
　　　6.　　　　　　　　　for　(var　i:=0;　i<.gif' />.length;　i)　　
　　　7.　　　　　　　　　{　　
　　　8.　　　　　　　　　　　　　pen.graphics.lineTo(.gif' />[i][0],.gif' />[i][1]);　　
　　　9.　　　　　　　　　}　　
　　10.　　　　　　　　　pen.graphics.drawCircle(60,-11,12);//绘制剑中心　　
　　11.　　　　　　　　　pen.graphics.drawCircle(60,60,14);　　
　　12.　　　　　　　　　pen.graphics.beginFill(0xff00ff);　　
　　13.　　　　　　　　　pen.graphics.drawCircle(60,60,5);　　
　　14.　　　　　　　　　pen.graphics.endFill;　　
　　15.　　　　　　　　　pen.graphics.moveTo(60,60);　　
　　16.　　　　　　　　　pen.graphics.lineTo(65,330);　　
　　17.　　　　　　　　　pen.scaleX=pen.scaleY=0.3;　　
　　18.　　　　　}

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

　　第 2步:交互操作

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

stage.addEventListener(MouseEvent.CLICK,onClick);
　private　function　onClick(event:MouseEvent):void
{
　　//产生系列对象,对其对象进行分布处理按圆轨迹进行分布
}

　　效果如下图

　　　1.　for　(var　i:=0;　i<num;　i)　　
　　　2.　　　　　　　　　　　　　{　　
　　　3.　　　　　　　　　　　　　　　　　var　mysword:Sword=　Sword;　　
　　　4.　　　　　　　　　　　　　　　　　contain.addChild(mysword);　　
　　　5.　　　　　　　　　　　　　　　　　mysword.x=mouseX+Math.cos(i*2*Math.PI/num)*150;　　
　　　6.　　　　　　　　　　　　　　　　　mysword.y=mouseY+Math.sin(i*2*Math.PI/num)*150;　　
　　　7.　　　　　　　　　　　　　　　　　list.push(mysword);　　
　　　8.　　　　　　　　　　　　　　　　　var　angle:Number=Math.atan2(mouseY-mysword.y,mouseX-mysword.x);//角度　　
　　　9.　　　　　　　　　　　　　　　　　mysword.angle=angle;　　
　　10.　　　　　　　　　　　　　　　　　mysword.rotation=angle*180/Math.PI-90;　　　　　　　　　　　　
　　11.　　　　　　　　　　　　　　　　　mysword.addEventListener(Event.ENTER_FRAME,Run);//进行运动　　
　　12.　　　　　　　　　　　　　}　　



　　查看原图(大图)

　　第 3步:剑归宗

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

　　vx=speed*Math.cosA;

　　vy=speed*Math.sinA;

　　速度是向量它可以分解成两个区别方向分速度根据角度偏移了

　　剑xvx；

　　剑yvy； 在每帧刷新下剑会产生位移改变



　　代码清单:

　　　1.　package　　　
　　　2.　{　　
　　　3.　　　　　//剑归宗　　
　　　4.　　　
　　　5.　　　　　import　flash.display.Sprite;　　
　　　6.　　　　　import　flash.events.*;　　
　　　7.　　　　　import　flash.display.DisplayObject;　　
　　　8.　　　
　　　9.　　　　　public　　Main　extends　Sprite　　
　　10.　　　　　{　　
　　11.　　　　　　　　　private　var　list:Array=　Array;　　
　　12.　　　　　　　　　private　var　Speed:=4;//飞行速度　　
　　13.　　　　　　　　　private　var　contain:Sprite=　Sprite;　　
　　14.　　　　　　　　　private　var　num:=20;　　
　　15.　　　　　　　　　public　function　Main　　
　　16.　　　　　　　　　{　　
　　17.　　　　　　　　　　　　　addChild(contain);　　
　　18.　　　　　　　　　　　　　stage.addEventListener(MouseEvent.CLICK,onClick);　　
　　19.　　　　　　　　　}　　
　　20.　　　　　　　　　//创建把剑　　
　　21.　　　　　　　　　private　function　onClick(event:MouseEvent):void　　
　　22.　　　　　　　　　{　　
　　23.　　　　　　　　　　　　　while　(list.length>0)　　
　　24.　　　　　　　　　　　　　{　　
　　25.　　　　　　　　　　　　　　　　　list.pop;　　
　　26.　　　　　　　　　　　　　}　　
　　27.　　　　　　　　　　　　　for　(var　i:=0;　i<num;　i)　　
　　28.　　　　　　　　　　　　　{　　
　　29.　　　　　　　　　　　　　　　　　var　mysword:Sword=　Sword;　　
　　30.　　　　　　　　　　　　　　　　　contain.addChild(mysword);　　
　　31.　　　　　　　　　　　　　　　　　mysword.x=mouseX+Math.cos(i*2*Math.PI/num)*150;　　
　　32.　　　　　　　　　　　　　　　　　mysword.y=mouseY+Math.sin(i*2*Math.PI/num)*150;　　
　　33.　　　　　　　　　　　　　　　　　list.push(mysword);　　
　　34.　　　　　　　　　　　　　　　　　var　angle:Number=Math.atan2(mouseY-mysword.y,mouseX-mysword.x);//角度　　
　　35.　　　　　　　　　　　　　　　　　mysword.angle=angle;　　
　　36.　　　　　　　　　　　　　　　　　mysword.rotation=angle*180/Math.PI-90;　　　　　　　　　　　　
　　37.　　　　　　　　　　　　　　　　　mysword.addEventListener(Event.ENTER_FRAME,Run);//进行运动　　
　　38.　　　　　　　　　　　　　}　　
　　39.　　　
　　40.　　　　　　　　　}　　
　　41.　　　　　　　　　//运动　　
　　42.　　　　　　　　　private　function　Run(event:Event):void　　
　　43.　　　　　　　　　{　　
　　44.　　　　　　　　　　　　　var　vx:Number=Math.cos(event.currentTarget.angle)*Speed;　　
　　45.　　　　　　　　　　　　　var　vy:Number=Math.sin(event.currentTarget.angle)*Speed;　　
　　46.　　　　　　　　　　　　　event.currentTarget.xvx;　　
　　47.　　　　　　　　　　　　　event.currentTarget.yvy;　　
　　48.　　　　　　　　　　　　　　(event.currentTarget.x>stage.stageWidth||event.currentTarget.x<0||event.currentTarget.y<0||　　
　　49.　　　　　　　　　　　　　event.currentTarget.y>stage.stageHeight　　
　　50.　　　　　　　　　　　　　)　　
　　51.　　　　　　　　　　　　　{　　　(event.currentTarget!=null)　　
　　52.　　　　　　　　　　　　　　　　{　　
　　53.　　　　　　　　　　　　　　　　　event.currentTarget.removeEventListener(Event.ENTER_FRAME,Run);　　
　　54.　　　　　　　　　　　　　　　　　contain.removeChild(DisplayObject(event.currentTarget));　　
　　55.　　　　　　　　　　　　　　　　}　　
　　56.　　　　　　　　　　　　　}　　
　　57.　　　　　　　　　}　　
　　58.　　　　　}　　
　　59.　}　　
　　60.　　　
　　61.　import　flash.display.Sprite;　　
　　62.　//描绘把剑　　
　　63.　ernal　　Sword　extends　Sprite　　
　　64.　{　　
　　65.　　　　　private　var　pen:Sprite=　Sprite;　　
　　66.　　　　　public　var　angle:Number=0;　　
　　67.　　　　　private　var　.gif' />:Array=[　[50,0],　　
　　68.　　　　　　　[50,50],　　
　　69.　　　　　　　[20,50],　　
　　70.　　　　　　　[20,60],　　
　　71.　　　　　　　[45,60],　　
　　72.　　　　　　　[45,300],　　
　　73.　　　　　　　[65,330],　　
　　74.　　　　　　　[75,300],　　
　　75.　　　　　　　[75,60],　　
　　76.　　　　　　　[105,60],　　
　　77.　　　　　　　[105,50],　　
　　78.　　　　　　　[70,50],　　
　　79.　　　　　　　[70,0],　　
　　80.　　　　　　　[50,0]　　
　　81.　　　　　　];　　
　　82.　　　　　public　function　Sword　　
　　83.　　　　　{　　
　　84.　　　　　　　　　init;　　
　　85.　　　　　}　　
　　86.　　　　　private　function　init:void　　
　　87.　　　　　{　　
　　88.　　　　　　　　　addChild(pen);　　
　　89.　　　　　　　　　pen.graphics.lineStyle(1,0x000000);　　
　　90.　　　　　　　　　pen.graphics.moveTo(.gif' />[0][0],.gif' />[0][1]);　　
　　91.　　　　　　　　　for　(var　i:=0;　i<.gif' />.length;　i)　　
　　92.　　　　　　　　　{　　
　　93.　　　　　　　　　　　　　pen.graphics.lineTo(.gif' />[i][0],.gif' />[i][1]);　　
　　94.　　　　　　　　　}　　
　　95.　　　　　　　　　pen.graphics.drawCircle(60,-11,12);//绘制剑中心　　
　　96.　　　　　　　　　pen.graphics.drawCircle(60,60,14);　　
　　97.　　　　　　　　　pen.graphics.beginFill(0xff00ff);　　
　　98.　　　　　　　　　pen.graphics.drawCircle(60,60,5);　　
　　99.　　　　　　　　　pen.graphics.endFill;　　
　100.　　　　　　　　　pen.graphics.moveTo(60,60);　　
　101.　　　　　　　　　pen.graphics.lineTo(65,330);　　
　102.　　　　　　　　　pen.scaleX=pen.scaleY=0.3;　　
　103.　　　　　}　　
　104.　}　　

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



　　第 4步:对剑分布进行改造

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

　　下面是另外个版本采用复制手法不样有时候采用

　　循环能够次性看到全貌但是有时候采用时间错开会看到不样过程Timer 类能够实现到时间错开过程我们可以对其进行改造看看效果如何

timer=　Timer(100);
timer.addEventListener(TimerEvent.TIMER,onTimer);
private　function　onTimer(event:TimerEvent):void
{
　　按时间间隔创建对象能够看到创建过程
}



　　查看原图(大图)

　　下面为代码清单

　　　1.　package　　　
　　　2.　{　　
　　　3.　　　　　//剑归宗　　
　　　4.　　　
　　　5.　　　　　import　flash.display.Sprite;　　
　　　6.　　　　　import　flash.events.*;　　
　　　7.　　　　　import　flash.display.DisplayObject;　　
　　　8.　　　　　import　flash.utils.Timer;　　
　　　9.　　　　　import　flash.geom.Po;　　
　　10.　　　
　　11.　　　　　public　　Main　extends　Sprite　　
　　12.　　　　　{　　
　　13.　　　　　　　　　private　var　list:Array=　Array;　　
　　14.　　　　　　　　　private　var　Speed:=10;//飞行速度　　
　　15.　　　　　　　　　private　var　contain:Sprite=　Sprite;　　
　　16.　　　　　　　　　private　var　num:=20;　　
　　17.　　　　　　　　　private　var　timer:Timer;　　
　　18.　　　　　　　　　private　var　count:=-1;　　
　　19.　　　　　　　　　private　var　key:Boolean=true;　　
　　20.　　　　　　　　　private　var　key2:Boolean=true;　　
　　21.　　　　　　　　　private　var　po:Po;//记录鼠标个点　　
　　22.　　　　　　　　　public　function　Main　　
　　23.　　　　　　　　　{　　
　　24.　　　　　　　　　　　　　addChild(contain);　　
　　25.　　　　　　　　　　　　　stage.addEventListener(MouseEvent.CLICK,onClick);　　
　　26.　　　　　　　　　　　　　timer=　Timer(100);　　
　　27.　　　　　　　　　　　　　timer.addEventListener(TimerEvent.TIMER,onTimer);　　
　　28.　　　　　　　　　}　　
　　29.　　　　　　　　　private　function　onTimer(event:TimerEvent):void　　
　　30.　　　　　　　　　{　　
　　31.　　　　　　　　　　　　　count;　　
　　32.　　　　　　　　　　　　　var　mysword:Sword=　Sword;　　
　　33.　　　　　　　　　　　　　contain.addChild(mysword);　　
　　34.　　　　　　　　　　　　　//mysword.x=po.x+Math.cos(count*2*Math.PI/num)*150;　　
　　35.　　　　　　　　　　　　　//mysword.y=po.y+Math.sin(count*2*Math.PI/num)*150;　　
　　36.　　　　　　　　　　　　　mysword.x=50+Math.random*60;　　
　　37.　　　　　　　　　　　　　mysword.y=(count+1)*20;　　
　　38.　　　　　　　　　　　　　list.push(mysword);　　
　　39.　　　　　　　　　　　　　var　angle:Number=Math.atan2(po.y-mysword.y,po.x-mysword.x);//角度　　
　　40.　　　　　　　　　　　　　mysword.angle=angle;　　
　　41.　　　　　　　　　　　　　//mysword.rotation=angle*180/Math.PI-90;　　
　　42.　　　　　　　　　　　　　mysword.rotation=-90;　　　　　　　　　　　　　
　　43.　　　　　　　　　　　　　　(countnum)　　
　　44.　　　　　　　　　　　　　{　　
　　45.　　　　　　　　　　　　　　　　　timer.stop;　　
　　46.　　　　　　　　　　　　　　　　　key=true;　　
　　47.　　　　　　　　　　　　　　　　　count=-1;　　
　　48.　　　　　　　　　　　　　　　　　po=null;　　
　　49.　　　　　　　　　　　　　　　　　for　(var　i:=0;　i<=num;　i)　　
　　50.　　　　　　　　　　　　　　　　　{　　
　　51.　　　　　　　　　　　　　　　　　　　　　list[i].addEventListener(Event.ENTER_FRAME,Run);//进行运动　　
　　52.　　　　　　　　　　　　　　　　　}　　
　　53.　　　　　　　　　　　　　}　　
　　54.　　　　　　　　　}　　
　　55.　　　　　　　　　//创建把剑　　
　　56.　　　　　　　　　private　function　onClick(event:MouseEvent):void　　
　　57.　　　　　　　　　{　　
　　58.　　　　　　　　　　　　　　(key)　　
　　59.　　　　　　　　　　　　　{　　
　　60.　　　　　　　　　　　　　　　　　while　(list.length>0)　　
　　61.　　　　　　　　　　　　　　　　　{　　
　　62.　　　　　　　　　　　　　　　　　　　　　list.pop;　　
　　63.　　　　　　　　　　　　　　　　　}　　
　　64.　　　　　　　　　　　　　　　　　timer.start;　　
　　65.　　　　　　　　　　　　　　　　　key=false;　　
　　66.　　　　　　　　　　　　　　　　　po=　Po(event.localX　,event.localY);//记录坐标点位置　　
　　67.　　　　　　　　　　　　　}　　
　　68.　　　　　　　　　　　　　//for　(var　i:=0;　i<num;　i)　　
　　69.　　　　　　　　　　　　　//{　　
　　70.　　　　　　　　　　　　　//var　mysword:Sword=　Sword;　　
　　71.　　　　　　　　　　　　　//contain.addChild(mysword);　　
　　72.　　　　　　　　　　　　　//mysword.x=mouseX+Math.cos(i*2*Math.PI/num)*150;　　
　　73.　　　　　　　　　　　　　//mysword.y=mouseY+Math.sin(i*2*Math.PI/num)*150;　　
　　74.　　　　　　　　　　　　　//list.push(mysword);　　
　　75.　　　　　　　　　　　　　//var　angle:Number=Math.atan2(mouseY-mysword.y,mouseX-mysword.x);//角度　　
　　76.　　　　　　　　　　　　　//mysword.angle=angle;　　
　　77.　　　　　　　　　　　　　//mysword.rotation=angle*180/Math.PI-90;　　
　　78.　　　　　　　　　　　　　//mysword.addEventListener(Event.ENTER_FRAME,Run);//进行运动　　
　　79.　　　　　　　　　　　　　//}　　
　　80.　　　
　　81.　　　　　　　　　}　　
　　82.　　　　　　　　　//运动　　
　　83.　　　　　　　　　private　function　Run(event:Event):void　　
　　84.　　　　　　　　　{　　
　　85.　　　　　　　　　　　　　var　vx:Number=Math.cos(event.currentTarget.angle)*Speed;　　
　　86.　　　　　　　　　　　　　var　vy:Number=Math.sin(event.currentTarget.angle)*Speed;　　
　　87.　　　　　　　　　　　　　event.currentTarget.xvx;　　
　　88.　　　　　　　　　　　　　event.currentTarget.yvy;　　
　　89.　　　　　　　　　　　　　　(event.currentTarget.x>stage.stageWidth||event.currentTarget.x<0||event.currentTarget.y<0||　　
　　90.　　　　　　　　　　　　　event.currentTarget.y>stage.stageHeight　　
　　91.　　　　　　　　　　　　　)　　
　　92.　　　　　　　　　　　　　{　　
　　93.　　　　　　　　　　　　　　　　　　(event.currentTarget!=null)　　
　　94.　　　　　　　　　　　　　　　　　{　　
　　95.　　　　　　　　　　　　　　　　　　　　　event.currentTarget.removeEventListener(Event.ENTER_FRAME,Run);　　
　　96.　　　　　　　　　　　　　　　　　　　　　contain.removeChild(DisplayObject(event.currentTarget));　　
　　97.　　　　　　　　　　　　　　　　　}　　
　　98.　　　　　　　　　　　　　}　　
　　99.　　　　　　　　　}　　
　100.　　　　　}　　
　101.　}　　
　102.　　　
　103.　import　flash.display.Sprite;　　
　104.　//描绘把剑　　
　105.　ernal　　Sword　extends　Sprite　　
　106.　{　　
　107.　　　　　private　var　pen:Sprite=　Sprite;　　
　108.　　　　　public　var　angle:Number=0;　　
　109.　　　　　private　var　.gif' />:Array=[　[50,0],　　
　110.　　　　　　　[50,50],　　
　111.　　　　　　　[20,50],　　
　112.　　　　　　　[20,60],　　
　113.　　　　　　　[45,60],　　
　114.　　　　　　　[45,300],　　
　115.　　　　　　　[65,330],　　
　116.　　　　　　　[75,300],　　
　117.　　　　　　　[75,60],　　
　118.　　　　　　　[105,60],　　
　119.　　　　　　　[105,50],　　
　120.　　　　　　　[70,50],　　
　121.　　　　　　　[70,0],　　
　122.　　　　　　　[50,0]　　
　123.　　　　　　];　　
　124.　　　　　public　function　Sword　　
　125.　　　　　{　　
　126.　　　　　　　　　init;　　
　127.　　　　　}　　
　128.　　　　　private　function　init:void　　
　129.　　　　　{　　
　130.　　　　　　　　　addChild(pen);　　
　131.　　　　　　　　　pen.graphics.lineStyle(1,0xffffff);　　
　132.　　　　　　　　　pen.graphics.moveTo(.gif' />[0][0],.gif' />[0][1]);　　
　133.　　　　　　　　　for　(var　i:=0;　i<.gif' />.length;　i)　　
　134.　　　　　　　　　{　　
　135.　　　　　　　　　　　　　pen.graphics.lineTo(.gif' />[i][0],.gif' />[i][1]);　　
　136.　　　　　　　　　}　　
　137.　　　　　　　　　pen.graphics.drawCircle(60,-11,12);//绘制剑中心　　
　138.　　　　　　　　　pen.graphics.drawCircle(60,60,14);　　
　139.　　　　　　　　　pen.graphics.beginFill(0xff00ff);　　
　140.　　　　　　　　　pen.graphics.drawCircle(60,60,5);　　
　141.　　　　　　　　　pen.graphics.endFill;　　
　142.　　　　　　　　　pen.graphics.moveTo(60,60);　　
　143.　　　　　　　　　pen.graphics.lineTo(65,330);　　
　144.　　　　　　　　　pen.scaleX=pen.scaleY=0.3;　　
　145.　　　　　}　　
　146.　}　　

延伸阅读

• 2010-3-4-- flash绘图:flash 绘图API:绘制基础的图形
• 2009-1-23-- flash技巧:创建一个Flash站点的十大窍门技巧
• 2009-1-23-- flash绘图:Flash 8 基础绘图工具
• 2009-1-23-- flash元件:Flash 8 绘图练习-绘制 心 元件
• 2009-1-23-- flash元件:Flash 8 绘图练习-绘制 珍珠 元件
• 2009-1-23-- flash技巧:FLASH 实用窍门技巧的太阳系制造
• 2009-1-23-- flash元件:Flash 8 绘图练习-制作 项链 元件
• 2010-3-4-- flash绘图:flash 绘图API:太极
• 2010-3-4-- flash绘图:flash 绘图API:绘制秀曲线图形
• 2009-1-23-- flash元件:Flash 8 绘图练习-绘制 烛光 元件