javascript 拉斐尔的路径位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4905205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
path position with raphael
提问by nukl
how can i change path position with raphael js?
如何使用 raphael js 更改路径位置？
it very strange that obvious way not working:
很奇怪，这种明显的方式不起作用：
var p = paper.path("some path string");
p.attr("fill","red");
p.attr({x:200,y:100}); //not working
回答by CoolEsh
Use
利用
var p = paper.path("M10 10L90 90L10 90");
p.attr("fill","red");
p.translate(300, 100);
回答by Andrew
I got it done using something like this:
我用这样的东西完成了它：
p.attr({path:"M10 10L90 90L10 90"});
回答by user56reinstatemonica8
To move a path in Raphael 2.0+, set or animate the transform attribute using translate ('t'), like this:
要在 Raphael 2.0+ 中移动路径，请使用 translate ('t') 设置或动画变换属性，如下所示：
// animate
someElement.animate({transform: ['t',100,100]}, 1000);
// set
someElement.attr({transform: ['t',100,100]});
This overwrites any existing translation. So, this...
这会覆盖任何现有的翻译。所以这...
someElement.animate({transform: ['t',100,100]}, 1000, function(){
someElement.animate({transform: ['t',50,50]}, 1000);
});
... will move down right 100px, then, it'll go back up left 50px, ending 50px down and right from where it started. (if it's been rotated, it'll take that rotation into account - use 'T' instead of 't' to ignore past rotation)
... 将向右下移动 100 像素，然后，它会向左返回 50 像素，从它开始的位置向下和向右结束 50 像素。（如果它已旋转，它将考虑该旋转 - 使用 'T' 而不是 't' 忽略过去的旋转）
If you want it to move based on relative, not absolute, co-ordinates, based on where it is now not where it was when it was first translated, you need to get the previous translation co-ordinates and apply them.
如果您希望它基于相对坐标而不是绝对坐标移动，基于它现在不是第一次平移时的位置，则需要获取以前的平移坐标并应用它们。
This is harder than you might expect. There are two ways that I know of:
这比你想象的要难。我知道有两种方法：
1: Store the transform data in someElement.data()*:
1：将变换数据存储在someElement.data()*中：
someElement.data('t',[100,100]);
// stuff happens...
var translate = someElement.data('t');
2: Get the transform data using someElement.transform()then parse the hell out of it, for example*:
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;
}
};
*Adjust if you need to distinguish 't' from 'T'
*如果您需要区分“t”和“T”，请进行调整
Then, to animate a movement and keep going...
然后，要为运动设置动画并继续...
someElement.animate({transform: ['t',100,100]}, 1000, function(){
someElement.animate({transform: ['t',50+translate[0],50+translate[1] ]}, 1000);
});
Don't be tempted to use getBBox()for this (the standard way to get Raphael element positionsfor any type of element). getBBox()will include any non-translate movement, like the M move in the path definition.
不要试图使用getBBox()它（获取任何类型元素的Raphael 元素位置的标准方法）。getBBox()将包括任何非平移移动，如路径定义中的 M 移动。
回答by Mermoz
translateis absolute, if you need relative postioning, you can use p.attr` to change the "M" parameter
translate是绝对的，如果需要相对定位，可以使用p.attr`改变“M”参数
