Raphael.js中的縮放和旋轉

Question

我不了解Raphael.js轉換功能如何工作。 我有以下代碼：

var paper = new Raphael(0,0,1000,1000);
var rect = paper.rect(0,0,40,40);
rect.transform("s2,2,0,0t30,30");

轉換的結果是每個軸60 px移動，而不是30 px。為什么縮放會影響轉換？

Answer 1

如果提供了轉換列表，則最終效果就好像每個轉換都已按提供的順序分別指定一樣。 例如，

var rect = paper.rect(0,0,40,40);
rect.transform("s2,2,0,0t30,30");

在功能上等效於以下SVG標記（即使實際上這不是拉斐爾會產生的結果）

<g transform="scale(2)">
  <g transform="translate(30,30)">
    <rect x="0" y="0" width="30" height="30"/>
  </g>
</g>

因此，從內到外，我們從x1，y1，x2，y2 = 0、0、30、30處的rect開始，該矩形在已翻譯的<g>中將其移至30、30、60、60，然后在scaled <g> ，將結果縮放為60、60、120、120，即60像素的轉換。