如何从矩阵SVG中提取位置,旋转和比例 [英] How to extract position, rotation and scale from matrix SVG
本文介绍了如何从矩阵SVG中提取位置,旋转和比例的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个简单的问题:我想从应用于我的svg元素的变换矩阵中提取平移(tx,ty),旋转(r)和缩放(sx,sy)值。
I have a simple problem: I want to extract translation (tx, ty), rotation (r) and scale (sx, sy) values form a transform matrix applied to my svg element.
让我们使用这个例子:
<g
id="myElement"
transform="matrix(0.93893241,0.34410162,-0.34410162,0.93893241,363.88475,-76.125919)"
>... </g>
如果在javascript中我做了
If, in javascript I do
document.getElementById("myElement").getCTM()
我可以访问a,b,c,d,e,f值。我如何从那里获得tx,ty,sx,sy和r?
谢谢
I can access to a, b, c, d, e, f values. How can I get tx, ty, sx, sy and r from there? Thanks
推荐答案
受此ActionScript版本的启发: https://gist.github.com/fwextensions/2052247 ,我写了一个JavaScript端口:
Inspired by this ActionScript version: https://gist.github.com/fwextensions/2052247, I wrote a JavaScript port:
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())
这篇关于如何从矩阵SVG中提取位置,旋转和比例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文