路径位置与raphael

Question

我怎么能用raphael js改变路径位置？

非常奇怪,明显的方式不起作用:

var p = paper.path("some path string");

p.attr("fill","red");
p.attr({x:200,y:100});  //not working

Answer 1

使用

var p = paper.path("M10 10L90 90L10 90");

p.attr("fill","red");
p.translate(300, 100);

Answer 2

我用这样的东西完成了它:

p.attr({path:"M10 10L90 90L10 90"});

Answer 3

要在Raphael 2.0+中移动路径,请使用translate('t')设置变换属性或为其设置动画,如下所示:

// animate
someElement.animate({transform: ['t',100,100]}, 1000);

// set
someElement.attr({transform: ['t',100,100]});

这会覆盖任何现有翻译.所以这...

someElement.animate({transform: ['t',100,100]}, 1000, function(){
  someElement.animate({transform: ['t',50,50]}, 1000);
});

...将向下移动100px,然后,它将向左移动50px,向下并向右开始向下50px.(如果已经旋转,则会将该旋转考虑在内 - 使用'T'而不是't'来忽略过去的旋转)

如果您希望它基于相对而非绝对的坐标移动,基于它现在不是第一次翻译时的位置,您需要获得先前的翻译坐标并应用它们.

这比你想象的要难.我知道有两种方法:

1:将变换数据存储在someElement.data()*中:

someElement.data('t',[100,100]);
// stuff happens...
var translate = someElement.data('t');

2:获取转换数据someElement.transform()然后解析它的地狱,例如*:

var transform = someElement.data();
for (var i = transform.length - 1; i >= 0; i--) {
  if(transform[i][0].toLowerCase() == 't') {
    var translate = [ transform[i][1], transform[i][2] ];
    break;
  }
};

*调整是否需要区分't'和'T'

然后,为一个运动制作动画并继续......

someElement.animate({transform: ['t',100,100]}, 1000, function(){
  someElement.animate({transform: ['t',50+translate[0],50+translate[1] ]}, 1000);
});

不要试图用getBBox()它(为任何类型的元素获得Raphael元素位置的标准方法).getBBox()将包括任何非平移运动,如路径定义中的M移动.