如何将Raphael.js设置移动到特定位置?

时间:2012-03-07 12:22:24

标签: javascript animation raphael

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

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

但我发现无法将set移至特定位置。

有两篇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中的内容,我想最后一个集合只是一个数组,这就是为什么没有xy属性。

是否可以访问有关集合元素的任何信息而无需单独解决它们?

为了将一个集合转换为一个特定的位置,你认为我将不得不计算出一个特定元素的转换,然后将该运动应用到整个集合中吗?还是有更好的方式让我错过了?

非常感谢

1 个答案:

答案 0 :(得分:4)

你是对的,这个集合只是一个数组。 遗憾的是,没有简单的方法来移动整套 - 至少从我收集的内容来看。 我一直在努力的项目中遇到同样的问题,好吧......整夜。 看起来该集合对于将属性等应用于大量对象是最有用的。如果你想在屏幕上设置一百个红色圆圈就是你的家伙。 但是,如果您尝试将变换应用于集合,它将以与应用属性相同的方式工作 - 它的全局变为集合。这意味着您的所有圆圈将转到相同的坐标和比例等,而不仅仅是一个。 我一直在使用的解决方法是使用exclude和getById - 就像这样:

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

一旦从对象中排除了对象,就可以将变换应用于这样的单个对象。

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

然后你只需重复你想要移动的每个物体。

你可以想象这对于大型集合而言非常繁琐,你也可以使用单数var语法(除非你将属性应用于一组对象)。

我想知道是否有办法使用数组语法和数学为你做这个,但是你必须找出对象之间的所有关系。

或者我们可能会看到Raphael的新版本是否包含某种简单的set-transform。那将是天才。