Question

我无法用数学方式理解Matrix.add（）的工作原理，Snap.svg文档说：

Adds the given matrix to existing one

HTML：

<svg id="svgout" width="1000" height="1000" viewBox="0 0 800 800"></svg>

JS：

var paper = Snap("#svgout"); 
var r = paper.rect(0,0,100,100);

var mat = new Snap.matrix();
mat.scale(.5);
mat.add(mat.scale(3));

r.attr({transform: mat});
console.log(r.getBBox().width + "  " + r.getBBox().height );

我的问题在这里：

mat.scale(.5);           // width and height = 50
mat.add(mat.scale(3));   // width and height = 300

因此，最终宽度和高度应为50 + 300 = 350
但是在console.log = 225

中的结果

另一次尝试

mat.scale(1);           // width and height = 100
mat.add(mat.scale(3));  // width and height = 300

我的期望：100 + 300 = 400
但结果在console = 900！

这demo

Answer 1

在

mat.scale(.5)

mat现在是一个0.5的矩阵（s0.5）

然后我们采用s0.5矩阵并执行

mat.add(mat.scale(3))

所以

s1.5.add（S1.5）

和1.5 x 1.5 = 2.25

QED

另一个例子是相同的3 x 3 = 9

Snap.svg - Matrix.add（）如何工作？

1 个答案: