缩放和旋转在拉斐尔.js

scaling and rotation in Raphael.js

本文关键字：js 旋转 缩放      更新时间：2023-09-26

我不明白拉斐尔.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像素而不是30。为什么缩放会影响转换?

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

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

相关文章：