如何提取位置,从矩阵SVG旋转和缩放
问题描述:
我有一个简单的问题:我想提取翻译(TX,TY),旋转(R)和规模(SX,SY)值构成应用于变换矩阵我svg元素。如何提取位置,从矩阵SVG旋转和缩放
让我们用这个例子:
<g
id="myElement"
transform="matrix(0.93893241,0.34410162,-0.34410162,0.93893241,363.88475,-76.125919)"
>... </g>
如果在JavaScript我做
document.getElementById("myElement").getCTM()
我可以访问到A,B,C,d,E,F值。我如何从那里获得tx,ty,sx,sy和r? 感谢
答
此ActionScript版本的启发:https://gist.github.com/fwextensions/2052247,我写了一个JavaScript接口:
function deltaTransformPoint(matrix, point) {
var dx = point.x * matrix.a + point.y * matrix.c + 0;
var dy = point.x * matrix.b + point.y * matrix.d + 0;
return { x: dx, y: dy };
}
function decomposeMatrix(matrix) {
// @see https://gist.github.com/2052247
// calculate delta transform point
var px = deltaTransformPoint(matrix, { x: 0, y: 1 });
var py = deltaTransformPoint(matrix, { x: 1, y: 0 });
// calculate skew
var skewX = ((180/Math.PI) * Math.atan2(px.y, px.x) - 90);
var skewY = ((180/Math.PI) * Math.atan2(py.y, py.x));
return {
translateX: matrix.e,
translateY: matrix.f,
scaleX: Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b),
scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),
skewX: skewX,
skewY: skewY,
rotation: skewX // rotation is the same as skew x
};
}
用法:decomposeMatrix(document.getElementById('myElement').getCTM())
非常感谢您的回答!一旦我有电脑回来,我会尝试一下,我会给出一个反馈。 – lviggiani 2013-05-06 11:54:17
我没有得到确切的e,f值?为什么? – 2014-10-19 09:48:20
旋转可以更直接地计算,参见:http://*.com/a/4361442 – neo 2016-05-08 09:42:06