路径位置与Raphael的应用

Question

如何使用Raphael JS更改路径位置？

很奇怪的是，明显的方法却不起作用：

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

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

- nukl

Answer 1

使用

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

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

- CoolEsh

---

我可以基于translate方法制作动画吗？ - nukl

似乎我可以这样做：p.animate({translation: '0 50'}, 1000,'bounce'); - nukl

Answer 2

要在 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);
});

...将向右下移动100像素，然后向左上返回50像素，最终停留在比起始位置向下和向右50像素的位置。(如果已经旋转过，则会考虑该旋转 - 使用'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移动。

- user56reinstatemonica8

---

这是另一种移动路径的方法，您可以设置路径要移动到的绝对X / Y位置：https://dev59.com/KW015IYBdhLWcg3w_Ayg#15232507 - user56reinstatemonica8

Answer 3

我使用类似以下的方式完成了它：

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

- Andrew

Answer 4

translate 是绝对定位，如果您需要相对定位，可以使用 p.attr` 更改 "M" 参数

- Mermoz

---

我认为翻译是相对于文档而言的：按给定的金额将翻译添加到元素变换列表中。 - Reto Aebersold