javascript - 如何将 Raphael.js 集移动到特定位置？

Question

如果我使用 raphael.js 将单个元素设置为动画到特定位置，那么我可以使用以下代码来设置元素 x 属性:

elem.animate({x: specific_X_Location}, 1000);

但我没有找到将集合移动到特定位置的方法。

有两篇SO文章: accessing a set inside a set in raphael js ，以及
How is set animation done in Raphael?
讨论如何使用变换或平移将集合平移给定距离(即将集合向右移动 100 或向上移动 100)，例如

var mySet = paper.set();
mySet.push(...add elements to set);
mySet.animate({transform: "t100,0"}, 1000); // move my set right by 100

但似乎没有办法将整个集合移动到特定位置。

看看 firebug 中的东西，我猜集合最终只是一个数组，这就是为什么它没有 x 或 y 属性。

是否可以访问有关集合元素的任何信息，而无需单独处理它们？

为了将集合转换到特定位置，您认为我必须计算出特定元素的转换，然后将该移动应用于整个集合吗？还是有我错过的更好的方法？

非常感谢

Answer 1

你说得对，集合只是一个数组。遗憾的是，没有简单的方法可以移动整套设备——至少从我收集到的情况来看是这样。我在一个我一直在做的项目中也遇到了同样的问题，嗯……整个晚上。看起来该集合对于将属性等应用到一大群对象是最有用的。假设你想在屏幕上设置一百个红色圆圈，那么你的人就是你的人。但是，如果您尝试将变换应用到集合，它将以与应用属性相同的方式工作 - 它对集合是全局的。这意味着您的所有圆圈都将采用相同的坐标和比例等，而不仅仅是一个。我一直在使用的解决方法是使用排除和 getById - 像这样:

 yourSet.exclude(paper.getById('2'));

一旦您从集合中排除了对象，您就可以将变换应用到单个对象，如下所示。

 paper.getById('2').transform('t230,265s3');

然后，您只需对要移动的每个对象重复此操作即可。

正如您可以想象的那样，这对于大型集合来说非常乏味，您也可以只使用单一 var 语法(除非您将属性应用于一组对象)。

我想知道是否有一种方法可以使用数组语法和数学来为您完成此操作，但是您必须弄清楚对象之间的所有关系。

也许我们会看看 Raphael 的新版本是否包含某种简单的集合转换。那将是天才。