如何移动raphael set？

Question

我有一组使用Raphael.set()分组的对象。我想做的是将整个组（更改x和y坐标）从一个地方移动到另一个地方。 如何将整个集合作为单个对象移动？ 我已经发现，当调用.attr({X: newX, Y: newY})时，集合中的每个元素将定位在该坐标上，这将导致所有元素堆积在同一位置。

- bozhidarc

Answer 1

编辑：参考Rick Westera的答案，因为translate现在已被弃用。

使用.translate(x, y)，例如：

var paper = Raphael('stage', 300, 300);
var set = paper.set();
set.push(paper.rect(0,0,30,50));
set.push(paper.circle(40,50,10));
set.push(paper.path("M 0 70 L 100 70"));
set.translate(100, 100);

http://jsfiddle.net/q4vUx/

- methodofaction

---

如果您希望更加生动形象，这个网址可能有所帮助：http://jsfiddle.net/q4vUx/1/。 - limoragni

translate 方法已被弃用，请使用 transform 方法（请参见我的回答）。 - Rick Westera

Answer 2

translate已经被弃用，使用transform('Tx,y')代替。例如：

var paper = Raphael('stage', 300, 300);
var set = paper.set();
set.push(paper.rect(0, 0, 100, 100));
set.push(paper.text(50, 50, "Foo"));
set.transform("T100,50");

请注意，有两种类型的翻译：

• 'T100,50' 会使用全局轴将设置向右移动100像素并向下移动50个像素。
• 't100,50' 也会进行相同的操作，但是使用设置的本地轴（即它取决于设置旋转的方向）。

- Rick Westera

Answer 3

这是我用来重新定位一组元素的代码，我的情况是使用Paper.print()返回的字体集，但我认为它适用于任何类型的元素集合。

var glyphs = paper.print(0, 0, text, paper.getFont(font, 800), fontSize).hide();
glyphs.transform('...T' + [posx, posy] + 'R' + [angle, posx, posy]).show();

希望这有所帮助。

- Hugo Giusti