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=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) { 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. = new Vector.(); public var data:Vector. = new Vector.(); 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(); } }