在RaphaelJs中“应用”一个转变

Question

我在RaphaelElement周围写了一个包装类。 它有一个属性elem，它存储相应的Element和两个方便的方法setPos和getPos。 此外，还有一个位置成员，其中包含两个条目x和y。

因此getPos（）只返回位置。 setPos接受一个新位置作为参数，并且必须更新elem的坐标。

遗憾的是，没有任何信息可以在elem中存储哪种类型的RaphaelElement，它可以是圆形也可以是矩形。 现在setPos里面的代码如下所示：

//position is the parameter, this.pos is the member
this.pos = position;
this.elem.attr("x",this.pos.x);
this.elem.attr("y",this.pos.y);
this.elem.attr("cx", this.pos.x);
this.elem.attr("cy", this.pos.y);

这感觉就像一个肮脏的解决方法。 它适用于圆形和矩形，但在矩形上没有属性“cx”或“cy”，并且在圆圈上“x”和“y”都不存在。

我浏览了文档以获得更好的方法来修改RaphaelElement的位置并找到方法转换。 但是有一个问题：我没有找到一种方法来提供“绝对”的新坐标来进行转换。 它只提供翻译，旋转或缩放的方法。 如果我必须通过应用从当前位置到新位置的转换来更改位置，那么我必须在转换字符串中附加新的转换。 我担心它会长得很长。 此外，我将不得不评估一个越来越长的字符串来获得我目前的位置。

当然可以通过在转换中添加新的翻译来移动我的元素，但我希望能够直接设置新位置或者“应用”或“完成”转换，这样它的字符串就不会无限增长。

Answer 1

TransformList上的合并方法将转换列表转换为单个矩阵。 您可以在添加翻译后调用此方法。

或者，您可以在transformList上调用getItem，它将为您提供一个SVGTransform对象，您可以在其上调用setTranslate，直接设置新位置。 你需要注意有一个变换，如果没有变换就创建一个变换。