如何连续地将拉斐尔画布(包含一些对象)从一个坐标移动到另一个坐标再到其他坐标

How to move a Raphael canvas wholly (which contains some objects) from one coordinate to another coordinate to some other coordinate continuously

本文关键字:坐标 对象 一个 其他 移动 另一个 连续 何连续 包含一      更新时间:2023-09-26

我在这里创建了拉斐尔的内容.. http://jsfiddle.net/ryWH3/76/

现在我需要将拉斐尔画布的全部内容从一个协调到另一个坐标。

例如:

我的拉斐尔画布在 -- x_coordinate:100,y_coordinate:100

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

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

再次到最后一个坐标中的其他一些坐标

请建议我移动此内容

好吧,

我认为您实际上无法将论文本身更多,这是 Raphael 返回给您的 r 变量的内容。您可以遍历元素并对它们执行任何您喜欢的操作:

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

我更新了你的小提琴来演示它的移动:

更新的小提琴

编辑

我还添加了以下内容来演示如何对各种设置进行动画处理:

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

使用上述动画更新了小提琴

例如使用jquery...

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

paper.canvas 是你如何掌握其中的 dom 元素。