如何为使用 Raphael JS 绘制的矢量路径设置动画?
我有一组坐标,我想使用 Raphael JS 进行连接。
在网格上,坐标是(x,y 集合)。我想从一端开始,并在用户观看时“连接点”。最终产品看起来像这样:
Picture 9.png http://img213.imageshack.us/img213/8013/picture9my.png
理想情况下,我希望能够使路径弯曲,这样它们看起来更像这样(添加坐标以供引用):
Picture 10.png http://img534.imageshack.us/img534/1789/picture10fc.png
坐标是:
26,-6
14,-12
5,-20
11,-28
14,-37
5,-40
我一直在谷歌搜索,我已经通读了这个问题 How to draw a vector path progressively? (Raphael.js)但我正在尝试专门使用 Raphael.js,该页面上的 Raphael.js 示例似乎不起作用,也没有讨论使用多个坐标点进行输入。
最佳答案
渐进路径
逐步绘制路径很容易做到。我不喜欢 this question 上接受度第二高的答案因为它在每一步都重新创建一条路径,清除中间的纸张。这是我一次又一次使用的效用函数:
function drawpath( canvas, pathstr, duration, attr, callback )
{
var guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
var total_length = guide_path.getTotalLength( guide_path );
var last_point = guide_path.getPointAtLength( 0 );
var start_time = new Date().getTime();
var interval_length = 50;
var result = path;
var interval_id = setInterval( function()
{
var elapsed_time = new Date().getTime() - start_time;
var this_length = elapsed_time / duration * total_length;
var subpathstr = guide_path.getSubpath( 0, this_length );
attr.path = subpathstr;
path.animate( attr, interval_length );
if ( elapsed_time >= duration )
{
clearInterval( interval_id );
if ( callback != undefined ) callback();
guide_path.remove();
}
}, interval_length );
return result;
}
您可以在实际中看到它 on my site .
仅此一项就可以使以线性方式动画化点的渐进路径结构绝对简单。您只需编译您的路径...
var sequence_path = ["M26,-6", "L14,-12", "L5,-20", "L11,-28", "L14,-37", "L5,-40"];
然后将其传递给您设置的任何路径动画函数。就我而言,
drawpath( paper,
sequence_path,
3500,
{ stroke: 'black', 'stroke-width': 2, 'stroke-opacity': 1, fill: 'none', 'fill-opacity': 0 },
function()
{
alert("All done"); // trigger whatever you want here
} );
曲线插值
Raphael 2.0 的 Catmull Rom 功能使您的点之间的优雅曲线非常简单(感谢 Erik Dahlström 指出了这一点)。您需要做的就是使用“R”命令在点之间移动构建一条路径,Raphael 将完成剩下的工作。
function generateInterpolatedPath( points )
{
var path_sequence = [];
path_sequence.push( "M", points[0].x, points[0].y );
path_sequence.push( "R" );
for ( var i = 1; i < points.length; i++ )
{
path_sequence.push( points[i].x, points[i].y );
}
return path_sequence;
}
您可以看到所有组件协同工作 here .
关于javascript - 如何为使用 Raphael JS 绘制的矢量路径制作动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13070959/