javascript - "Apply"RaphaelJs 中的转换

Question

我已经围绕 RaphaelElement 编写了一个包装类。它有一个存储相应元素的属性 elem 和两个便捷方法 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，这将直接设置新位置。您需要小心是否存在转换，如果没有则创建一个转换。