javascript - 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。为什么缩放会影响变换？

Answer 1

If a list of transforms is provided, then the net effect is as if each transform had been specified separately in the order provided.例如，

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

在功能上等同于以下 SVG 标记(尽管这实际上并不是 raphael 将生成的内容)

<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 的矩形开始，该矩形位于翻译后的 <g> 中。将其移动到 30, 30, 60, 60，然后按比例缩放 <g>它将结果缩放为 60, 60, 120, 120，即 60 像素的平移。