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