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