Svg matriz de descomposición

Question

en SVG que tienen element.getCTM() método que devuelve un SVGMatrix como:

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

Quiero calcular sx, sy y el ángulo de giro de esta matriz.

Answer 1

Hay mucho que leer y aprender sobre este tema. Le daré una respuesta básica, pero tenga en cuenta que si intenta hacer un juego o animaciones, esta NO es la manera de hacerlo.

a == sx y d == sy, por lo que acceder a estos como esto:

var r, ctm, sx, sy, rotation; 

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

Ahora para la rotación a == cos(angle) y b == sin(angle). Asin y acos no pueden por sí solos darte el ángulo completo, pero juntos pueden hacerlo. Que desea utilizar atan desde tan = sin/cos y sólo para este tipo de problema en realidad se desea utilizar atan2:

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

si se estudia la inverse trigonometric functions y la unit circle vas a entender por qué esto funciona.

Aquí está el recurso indespensible del W3C en las transformaciones SVG: http://www.w3.org/TR/SVG/coords.html. Desplácese un poco hacia abajo y podrá leer mucho más sobre lo que he mencionado anteriormente.

ACTUALIZACIÓN, ejemplo de uso cómo programar animaciones. Mantenga las transformaciones almacenadas por separado y, cuando se actualicen, sobrescriba/actualice la transformación del elemento 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