Question

我正在尝试使用此Demo

上的Raphaël.js库从路径的开头到结尾绘制一个简单的路径

var canvas = Raphael('canvas', 900, 648);
var pathString = "M 200,200 L200,10 L100,10";

$('#start').click(function(e) {
       var line = canvas.path(pathString).attr({ stroke: "#000" });
       line.animate({     },5000);
});

但不确定如何在此使用animate()功能。你能告诉我怎么做到这一点吗？感谢

Answer 1

可能有更好的方法可以做到这一点，但这是我能找到的最好方法：getSubpath允许检索路径的一部分。通过实现可以设置动画的自定义属性，我们可以根据此属性的值控制路径：

var canvas = Raphael('canvas', 900, 648);
var pathString = "M 200,200 L200,10 L100,10";

canvas.customAttributes.subpath = function (from, to) {
  from = Math.floor(from);
  to = Math.floor(to);
  if(to < from)
    to = from;
  return {path: this.parentPath.getSubpath(from, to)};
};

$('#start').click(function(e) {
  canvas.clear();
  // Create an invisible full representation of the path
  var completeLine = canvas.path(pathString).attr({ 'stroke-opacity': 0 });
  var len = completeLine.getTotalLength(pathString);

  // Create a partial representation of the path
  var line = canvas.path(pathString);
  line.parentPath = completeLine;
  line.attr({ stroke: "#000", subpath: [0, 0]});

  // Animate using our custom subpath attribute from 0 to the length of the full path
  line.animate({ subpath: [0, len] }, 5000);
});

https://jsfiddle.net/r40k0kjv/5/

在Raphaël.js中无法用动画绘制简单的路径（线）

1 个答案: