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

如果提供了转换列表，那么最终效果就像每个转换都按照提供的顺序单独指定。例如，

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 像素的平移。