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 原理。
效果图:
下面是一个小小实验。具体怎样算也行还想有一个其他新的思路。目前今晚只是想到这里,知道的也不是很多。
好,累。休息去。
代码没怎么优化。仅仅作演示而已。
而要实现套索工具,多少还有很大一段距离。不知道套索工具是怎样算的?这方面的资料相对比较少。图形的要求多少还是停留很原始的想法当中。如果有更好的想法,不妨留下你的意见。
这种描点法算起来的效果并不是很理想和智能,不知道还有无其他方式去实现。
2011年5月26日
今天的发现某一些人有另外一种做法,于是尝试修改一下。采用办法是drawpath的api ,采用的是填充渐变的方式来实现这种动画效果。
这种做法比之前会简单一点。
封装了一个小测试工具。
测试: