如何将拉斐尔画布完全（包含一些对象）从一个坐标移动到另一个坐标，再到另一个坐标答案

【问题标题】：How to move a Raphael canvas wholly (which contains some objects) from one coordinate to another coordinate to some other coordinate continuously如何将拉斐尔画布完全（包含一些对象）从一个坐标移动到另一个坐标，再到另一个坐标
【发布时间】：2012-05-08 09:28:52
【问题描述】：

我在这里创建了 Raphael 内容.. http://jsfiddle.net/ryWH3/76/

现在我需要将 Raphael Canvas 的全部内容从一个坐标到另一个坐标。

例如：

我的 Raphael 画布位于 -- x_coordinate:100,y_coordinate:100

现在我想把它移到 -- x: 200, y :200

我想将整个内容从旧坐标移动到 -- x:150, y:150

从最后一个坐标到其他一些坐标

请建议我移动此内容

【问题讨论】：

html中不能移动吗？
我尝试了一些像这样的动画 r.set(bigCircles, smallCircles, Text).animate({ transform: "t50,120" }, 1000);

标签： javascript html dom-events raphael

【解决方案1】：

好的，我认为您实际上无法更多地查看论文本身，这是 Raphael 返回给您的 r 变量的内容。你可以遍历元素并对它们做任何你喜欢的事情：

r.forEach(function (el) {
   el.translate(200,200);
});

我更新了你的小提琴来展示它的移动：

updated fiddle

编辑

我还添加了以下内容来演示为您的各种集合设置动画：

Text.animate({transform: "t100,100"}, 1000);
smallCircles.animate({transform: "t100,100"}, 1000);
bigCircles.animate({transform: "t100,100"}, 1000);

updated fiddle with above animation

【讨论】：

嗨 Neil，我可以像你一样移动。在转换到坐标后 - (200,200)，我想将它们移动到其他坐标，例如 (200,250)，然后再移动到其他坐标（300,340）等。我想将它们连续移动到特定坐标。你能帮我吗...谢谢，龙树
是的，我接受它。你只给出了好的答案。这就是为什么我要求你进一步帮助。提前致谢

【解决方案2】：

以 jquery 为例...

$(paper.canvas).css({top:topPosition, left: leftPosition});

paper.canvas 是您获取其内部的 dom 元素的方式。

【讨论】：