raphael移动设置多次

时间:2014-07-25 05:57:49

标签: javascript raphael transformation

我有一个包含圆形,矩形和文本的集合

我可以将它移动到特定位置(右侧50点),如下所示:

object.entireSet.transform("T50,0");

它运作正常

现在我想再次移动它(再次向右移动50点)

object.entireSet.transform("T50,0");

但物体停留在同一个地方。如果我想按照我的意愿移动它,我必须像这样重写命令

object.entireSet.transform("T100,0");

所以我的想法是,raphael以某种方式记住转换的原始点(0,0),因此(T50,0)将始终移动到同一点。

你知道如何重置转换,所以遵循代码

object.entireSet.transform("T50,0"); //first move
object.entireSet.transform("T50,0"); //second move

会导致对象从原始点(x,y)移动到点(x + 50,y)然后再移到(x + 100,y)?

1 个答案:

答案 0 :(得分:1)

您可以在文档中找到解决方案: http://raphaeljs.com/reference.html#Element.transform

set.transform("T50,0");
set.transform("...t50,0"); // This appends the transformation to the first one

jsFiddle这里:http://jsfiddle.net/vyFC6/1

编辑:我意识到你可能需要更多的解释来理解为什么你的代码不起作用。

这与Raphael的SVG性质有关。您可能希望快速学习SVG的基础知识,以更好地理解Raphael的一些功能。

您对同一元素执行的所有转换调用实际上都会更新字符串的值,以前用于...对其进行转换。

执行此操作时:

set.transform("T50,0");
set.transform("T50,0");

字符串的值是" T50,0"第一次通话后。你只需用第二次调用重写它==>它的价值仍然是" T50,0"到底。这就是它没有改变的原因。

执行此操作时:

set.transform("T50,0");
set.transform("...t50,0");   

字符串的值或多或少变为:" T50,0t50,0"这意味着在拉斐尔:在x上翻译50,在y上翻译0,那么在x上为0,在y上翻译为0。

为了说清楚,我更新了我的小提琴。您可以在其中找到不同的转换调用,我希望这些调用可以帮助您了解它的工作原理。