flash绘图API 蚂蚁线

               

       ps 工具当中的有一个工具叫套索工具，选取一个区域之后，可以实现虚线条滚动的效果，同样选择矩形选框工具也可以看到这种滚动的效果。看起来很像蚂蚁走动一样。在9ria天地会当中，看到一个贴里面实现了矩形的虚线滚动效果。要实现滚动，就需要结合到动画编程，相隔一定时间让线条重新绘制，形成一个像gif那样的动画。重新绘制是多少有点技巧的。

 

首先先看一下虚线的绘制:

 

例如：ABC--DEF-- GHI---GKL--MNO

 

我们把A-0字母看着每一个点。 从A--moveTo() 到lineTo（） C 为一条线，中间D-F 需要用作虚线不进行描点连线，然后再从G点MoveTo（） 到lineTo（）I点 ，重复以上动作，这样可以实现虚线绘制的。

 

 如图： 虚线效果 （---  ---  ---  --- ）

 

 

 

下面利用这个原理，简单实现这个套索工具当中的蚂蚁线效果。实现方法多少不算准确，只是一种思路实验。

 

 

在ps套索工具使用的时候，我们将鼠标点记录起来，当鼠标松开手的时候，需要再进行记录 松开时候是点和开始点之间的所有点集。把所有路径点都记录点完毕之后。

 

我们采用间隔的画法去进行连线描点。例如每隔 3点为一段A-C，单数为准，如此下去，就可以绘制出一个近似的任意虚线效果图形。

 

 

为了实现动画效果，需要结合时间器进行每隔一段时间进行重新绘制，绘制的时候。我们把采用移动办法让其产生一个动画效果。

 

例如moveTo(开始点X，开始点Y) 开始点的位置从（0,0）开始进行绘制描点，如果每隔一段时间后，让其开始点变成(1,1),(2,2) (,3,3) 然后当达到一定程度时候，重新 设置开始点为(0,0)。这些动画多少有点像gif 原理。

 

 

效果图：

 

     

 

 

下面是一个小小实验。具体怎样算也行还想有一个其他新的思路。目前今晚只是想到这里，知道的也不是很多。

 

好，累。休息去。 

代码没怎么优化。仅仅作演示而已。

 

而要实现套索工具，多少还有很大一段距离。不知道套索工具是怎样算的？这方面的资料相对比较少。图形的要求多少还是停留很原始的想法当中。如果有更好的想法，不妨留下你的意见。

 

这种描点法算起来的效果并不是很理想和智能，不知道还有无其他方式去实现。

 

 var shape:Shape=new Shape();shape.graphics.lineStyle(0,0x000000,0.5);addChild(shape);var points:Array=[];//点集var startPoint:Point;//开始点var tempPoint:Point;//临时点var IntervalId:uint;stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownHandler);function onMouseDownHandler(event:MouseEvent):void{ points=[]; clearInterval(IntervalId); startPoint=new Point(mouseX,mouseY); tempPoint=startPoint; points.push(startPoint); shape.graphics.moveTo(startPoint.x,startPoint.y); stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler); stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUpHandler);}//移动的时候记录两点之间的点function onMouseMoveHandler(event:MouseEvent):void{ var point:Point=new Point(mouseX,mouseY); points.push(point); var tempArray:Array=getPoints(tempPoint,point); points=points.concat(tempArray);  tempPoint=point;  shape.graphics.lineTo(point.x,point.y); event.updateAfterEvent();}function onMouseUpHandler(event:MouseEvent):void{ stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler); stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseUpHandler); shape.graphics.lineTo(startPoint.x,startPoint.y);  var tempArray:Array=getPoints(tempPoint,startPoint); points=points.concat(tempArray); drawDottedLine(6); tempPoint=null; IntervalId=setInterval(redraw,100);}//已经两点，求两点间所有的点，并返回一组数组点function getPoints(startPoint:Point,endPoint:Point):Array{ var result:Array=[]; var angle:Number=Math.atan2(endPoint.y-startPoint.y,endPoint.x-startPoint.x); var distan:Number=Math.sqrt(Math.pow(endPoint.x-startPoint.x,2)+Math.pow(endPoint.y-startPoint.y,2)); for (var i:int=1; i<distan-1; i++) {  var px:Number=startPoint.x+Math.cos(angle)*i;  var py:Number=startPoint.y+Math.sin(angle)*i;  result.push(new Point(px,py)); } return result;}//绘制虚线function drawDottedLine(gap:int=3):void{ var len:int=points.length; shape.graphics.clear(); shape.graphics.lineStyle(0,0x000000,0.5,true); trace(len); var flag:int=0; for (var i:int=0; i<len; i++) {  if (i%gap==0 )  {   flag++;      if (flag<2)   {        shape.graphics.moveTo(points[i].x,points[i].y);    if (i+gap-1>=len)    {     shape.graphics.lineTo(points[len-1].x,points[len-1].y);    }    else    {     shape.graphics.lineTo(points[i+gap-1].x,points[i+gap-1].y);    }   }   if(flag==2){flag=0;}  } }}var n:int=0;//重绘function redraw(gap:int=6):void{ var len:int=points.length; shape.graphics.clear(); shape.graphics.lineStyle(0,0x000000,0.5,true); var flag:int=0; n+=2; if(n==8)n=0; for (var i:int=0; i<len; i++) {  if (i%gap==0)  {   flag++;   if (flag<2)   {    if(i+n>=len)    {     shape.graphics.moveTo(points[i].x,points[i].y);    }    else    {       shape.graphics.moveTo(points[i+n].x,points[i+n].y);    }    if (i+gap-1+n>=len)    {     shape.graphics.lineTo(points[len-1].x,points[len-1].y);    }    else    {     shape.graphics.lineTo(points[i+gap-1+n].x,points[i+gap-1+n].y);    }   }   if(flag==2){flag=0;}  } }}

 

 

 

 2011年5月26日

  今天的发现某一些人有另外一种做法，于是尝试修改一下。采用办法是drawpath的api ，采用的是填充渐变的方式来实现这种动画效果。

 

这种做法比之前会简单一点。

封装了一个小测试工具。

 

 package { import flash.display.Sprite; import flash.display.GraphicsPath; import flash.events.*; import flash.geom.*; import flash.display.Shape; import flash.utils.Timer; public class AntsLine extends Sprite {  public var commands:Vector.<int> = new Vector.<int>();  public var data:Vector.<Number> = new Vector.<Number>();  private var antsPath:GraphicsPath;  private var lineMatrix:Matrix = new Matrix();  private var fillMatrix:Matrix = new Matrix();  private var antsLine:Shape=new Shape();  private var delayTime:uint;//动画执行时间  private var _startPoint:Point; //开始点位置  private var timer:Timer;    public function AntsLine(delayTime:uint=120)  {   this.delayTime = delayTime;   addChild(antsLine);   lineMatrix.createGradientBox(5, 5, Math.PI/4, 0, 0);   fillMatrix.createGradientBox(5, 5, Math.PI/4, 0, 0);   antsLine.graphics.lineStyle(0);   antsLine.graphics.lineGradientStyle("linear", [0x000000, 0xFFFFFF], [1, 1], [0xFF/2, 0xFF/2+1], lineMatrix, "repeat");  }        //创建路径  public function creatPath():void  {   antsPath=new GraphicsPath();  }  public function setlineStyle():void  {   antsLine.graphics.lineStyle(0,0.5);   antsLine.graphics.lineGradientStyle("linear", [0x000000, 0xFFFFFF], [1, 1], [0xFF/2, 0xFF/2+1], lineMatrix, "repeat");  }  //设置开始点位置  public function set startPoint(value:Point):void  {   this._startPoint = value;   antsPath.moveTo(value.x, value.y);  }  //获取开始点位置  public function get startPoint():Point  {   return this._startPoint;  }  //添加点集  public function addPoint(point:Point):void  {   antsPath.lineTo(point.x, point.y);   antsLine.graphics.drawPath(antsPath.commands, antsPath.data);  }  //链接开始点;  public function joinStartPoint():void  {   antsPath.lineTo(_startPoint.x, _startPoint.y);   antsLine.graphics.drawPath(antsPath.commands, antsPath.data);  }  //开始运动;  public function startMotion():void  {   if (timer==null)   {    timer = new Timer(delayTime);                timer.addEventListener(TimerEvent.TIMER,onTimerHandler);    timer.start();   }   else   {    timer.start();   }  }    //停止运动  public function stopMotion():void  {   timer.stop();  }          //是否在运动  public function isRuning():Boolean  {   return timer.running;  }      private function onTimerHandler(event:TimerEvent):void  {   draw();  }  private function draw():void  {   antsLine.graphics.clear();   antsLine.graphics.lineStyle(0,0.5);   antsLine.graphics.lineGradientStyle("linear", [0x000000, 0xFFFFFF], [1, 1], [0xFF/2, 0xFF/2+1], lineMatrix, "repeat");   antsLine.graphics.drawPath(antsPath.commands, antsPath.data);   lineMatrix.tx +=  0.3;     }  //填充颜色  public function beginFill(color:uint=0x000000,alpha:Number=0.3):void  {   antsPath.lineTo(startPoint.x, startPoint.y);   this.graphics.beginFill(color,alpha);   this.graphics.drawPath(antsPath.commands, antsPath.data);   this.graphics.endFill();   addEventListener(MouseEvent.MOUSE_DOWN,onDragHandler);   addEventListener(MouseEvent.MOUSE_UP,onDragHandler);     }          private function onDragHandler(event:MouseEvent):void  {   if(event.type==MouseEvent.MOUSE_DOWN)   this.startDrag();      if(event.type==MouseEvent.MOUSE_UP)   this.stopDrag();     }        //清理填充，线条 ，和数据  public function clear():void  {   this.graphics.clear();   antsLine.graphics.clear();   while (commands.length>0) commands.shift();       while (data.length>0) data.shift();         if (timer!=null) stopMotion();   antsPath = null;      removeEventListener(MouseEvent.MOUSE_DOWN,onDragHandler);   removeEventListener(MouseEvent.MOUSE_UP,onDragHandler);  }       //设置位置       public function move(x:Number,y:Number):void    {     this.x=x;     this.y=y;    }          public function removeTimerListener():void  {   if (timer!=null) timer.removeEventListener(TimerEvent.TIMER,onTimerHandler);       } }}

 

 

测试：

package { import flash.display.Sprite; import flash.events.*; import flash.geom.Point; public class Main extends Sprite {  private var antsline:AntsLine;  public function Main()  {   var canvas:Canvas=new Canvas();//底部容器   addChild(canvas)   antsline=new AntsLine();   addChild(antsline);   canvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseHandler);     }  private function onMouseHandler(event:MouseEvent):void  {   switch (event.type)   {    case MouseEvent.MOUSE_DOWN :               antsline.clear();//清除     antsline.setlineStyle();//设置样式     antsline.creatPath();//创建路径     antsline.move(0,0);//设置位置     antsline.startPoint = new Point(mouseX,mouseY);//设置开始点     stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseHandler);     stage.addEventListener(MouseEvent.MOUSE_UP, onMouseHandler);     break;    case MouseEvent.MOUSE_MOVE :     antsline.addPoint(new Point(mouseX,mouseY));//添加点集     break;    case MouseEvent.MOUSE_UP :             stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseHandler);     stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseHandler);     antsline.joinStartPoint();//链接开始点     antsline.beginFill();//填充     antsline.startMotion();//启动渐变动画效果     break;   }  } }}import flash.display.Sprite;class Canvas  extends Sprite{ function Canvas() {  this.graphics.beginFill(0x99CC00);  this.graphics.drawRect(0,0,550,400);  this.graphics .endFill();   } }

 

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow