matrix svg rotation angle decomposition

matrix - Descomposición de la matriz Svg



rotation angle (1)

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.


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