Svg矩阵分解

Question

在svg中我们有element.getCTM()一个返回SVGMatrixas的方法:

[a c e][b d f][0 0 1] 

我想从这个矩阵计算sx,sy和旋转角度.

Answer 1

关于这个主题有很多要阅读和学习的内容.我会给出一个基本的答案,但要注意,如果你想做一个游戏或动画,这不是这样做的方法.

a == sx并且d == sy,所以你访问这些是这样的:

var r, ctm, sx, sy, rotation;

r   = document.querySelector('rect'); // access the first rect element
ctm = r.getCTM();
sx  = ctm.a;
sy  = ctm.d;

现在轮换a == cos(angle)和b == sin(angle).Asin和acos不能单独给你完整的角度,但他们可以一起.您想要使用atan,因为tan = sin/cos您实际上想要使用此类问题atan2:

RAD2DEG = 180 / Math.PI;
rotation = Math.atan2( ctm.b, ctm.a ) * RAD2DEG;

如果你研究反三角函数和单位圆,你就会明白为什么会这样.

以下是W3C关于SVG转换的不可或缺的资源:http://www.w3.org/TR/SVG/coords.html.向下滚动一下,你可以阅读更多关于我上面提到的内容.

更新,示例用法如何以编程方式执行动画.保持转换单独存储,并在更新这些转换时,覆盖/更新SVG元素转换.

var SVG, domElement, ...

// setup
SVG        = document.querySelector( 'svg' );
domElement = SVG.querySelector( 'rect' );
transform  = SVG.createSVGTransform();
matrix     = SVG.createSVGMatrix();
position   = SVG.createSVGPoint();
rotation   = 0;
scale      = 1;

// do every update, continuous use
matrix.a = scale;
matrix.d = scale;
matrix.e = position.x;
matrix.f = position.y;

transform.setMatrix( matrix.rotate( rotation ) );
domElement.transform.baseVal.initialize( transform ); // clear then put