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()（任何类型的元素standard way to get Raphael element positions）。 getBBox()将包含任何非翻译动作，例如路径定义中的M移动。

Answer 4

translate是绝对的，如果你需要相对定位，你可以使用p.attr`来改变“M”参数

路径位置与raphael

4 个答案: