我有一个包含圆形,矩形和文本的集合
我可以将它移动到特定位置(右侧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)?
答案 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。
为了说清楚,我更新了我的小提琴。您可以在其中找到不同的转换调用,我希望这些调用可以帮助您了解它的工作原理。