我有一组坐标,我想用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",-37",-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功能使您的各点之间的优雅弯曲变得非常简单(感谢ErikDahlströ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.
原文地址:https://www.jb51.cc/js/156408.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。