Raphael JS:如何移动/动画路径对象？

Question

不知怎的,这不起作用......

var paper = Raphael("test", 500, 500);

var testpath = paper.path('M100 100L190 190');

var a = paper.rect(0,0,10,10);
a.attr('fill', 'silver');

a.mousedown( function() {
  testpath.animate({x: 400}, 1000);
});

我可以通过这种方式移动rects而不是路径,为什么会这样,以及如何移动路径对象呢？!

Answer 1

使用最新版本的Raphael,您可以这样做:

var _transformedPath = Raphael.transformPath('M100 100L190 190', 'T400,0');
testpath.animate({path: _transformedPath}, 1000);

这样可以省去clone使用临时对象的麻烦.

Answer 2

这似乎是一个path对象没有得到一个x,y价值-让你的动画可能仍然运行,但什么都不做.尝试改为设置路径功能的动画:

testpath.animate({path:'M400 100L490 190'},1000);

它使编写动画变得有点棘手,但你可以免费获得旋转和缩放!

顺便说一句:我确定这只是一个例子,但是在你的上面的代码testpath被放入全局范围,因为你没有初始化为var testpath

Answer 3

解决了,对于Rudu而言:

您需要创建一个新的动画路径.您可以使用clone()执行此操作,然后将转换应用于该克隆.对于像这样的简单动作来说似乎非常复杂,但它有效......

var paper = Raphael("test", 500, 500);

var testpath = paper.path('M100 100L190 190');

var a = paper.rect(0,0,10,10);
a.attr('fill', 'silver');

a.mousedown( function() {

  var temp = testpath.clone();
  temp.translate(400,0);
  testpath.animate({path: temp.attr('path')}, 1000);
  temp.remove();

});