在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，直接設置新位置。 你需要注意有一個變換，如果沒有變換就創建一個變換。