matrix - Descomposición de la matriz Svg

rotation angle

Question

En svg tenemos el método element.getCTM() que devuelve una SVGMatrix como:

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

Quiero calcular sx, sy y el ángulo de rotación 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 d == sy , por lo tanto, tendrá acceso a esto de la siguiente manera:

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) b == sin(angle) . Asin y acos no pueden por sí solos darte el ángulo completo, pero juntos pueden hacerlo. Desea utilizar atan ya que tan = sin/cos y para este tipo de problema realmente quiere usar atan2 :

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

Si estudias las funciones trigonométricas inversas y el círculo unitario comprenderás por qué funciona.

Aquí está el recurso indespensible del W3C sobre 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 de programación de 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