flash绘图API ：蚂蚁线

 

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;}
		}
	}
}

原文章链接地址：http://www.cnblogs.com/guoyiqi/archive/2011/05/24/2068859.html