在svg中我们有方法element.getCTM()
,它返回SVGMatrix
作为:
[a c e][b d f][0 0 1]
我想从这个矩阵计算sx,sy和旋转角度。
答案 0 :(得分:10)
关于这个主题需要阅读和学习很多东西。我会给出一个基本的答案,但要注意,如果你想做一个游戏或动画,这不是这样做的。
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不能单独给你完整的角度,但他们可以一起。您希望自tan = sin/cos
以来使用atan,而对于此类问题您实际上想要使用atan2
:
RAD2DEG = 180 / Math.PI;
rotation = Math.atan2( ctm.b, ctm.a ) * RAD2DEG;
如果您研究inverse trigonometric functions和unit circle,您就会明白为什么会这样做。
这是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