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

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

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


而且效果很好

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

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


但是对象停留在同一位置。如果我想按自己的意愿移动它,则必须这样重写命令

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


所以我的想法是,拉斐尔以某种方式记住转换的原始点(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)?

最佳答案

您可以在文档中找到解决方案:
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”在Raphael中表示:将x转换为50,将y转换为0,然后将x转换为50,y转换为0。

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

关于javascript - 拉斐尔移动设置多次,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24948951/

10-12 15:21