在RaphaelJs中“应用”一个转变

时间:2013-01-02 17:37:03

标签: javascript graphics web svg raphael

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

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

不幸的是,没有信息将哪种类型的RaphaelElement存储在elem中,它可以是圆形也可以是矩形。现在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的位置并找到方法转换。但是有一个问题:我没有找到一种方法来提供“绝对”的新坐标来进行转换。它只提供翻译,旋转或缩放的方法。如果我必须通过应用从当前位置到新位置的转换来更改位置,那么我必须在转换字符串中附加新的转换。我担心它会长得很长。而且,我必须评估一个越来越长的字符串来获得我现在的位置。

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

1 个答案:

答案 0 :(得分:2)

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

或者你可以在transformList上调用getItem,它会给你一个SVGTransform对象,你可以调用setTranslate来直接设置新的位置。如果没有变换,你需要注意变换并创建变换。