Svg matrice di decomposizione

Question

In svg abbiamo metodo element.getCTM() che restituisce un SVGMatrix come:

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

voglio calcolare sx, sy e l'angolo di rotazione da questa matrice.

Answer 1

C'è molto da leggere e imparare su questo argomento. Darò una risposta di base, ma fai attenzione, se stai provando a fare un gioco o un'animazione NON è questo il modo per farlo.

a == sx e d == sy, quindi dovrete accedere a queste come questo:

var r, ctm, sx, sy, rotation; 

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

Ora per la rotazione a == cos(angle) e b == sin(angle). Asin e AOS non possono da soli darti l'angolo completo, ma insieme possono farlo. Si desidera utilizzare Atan dal tan = sin/cos e proprio per questo tipo di problema è effettivamente desidera utilizzare atan2:

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

se si studia la inverse trigonometric functions e unit circle capirete perché questo funziona.

Ecco la risorsa indiscussa del W3C sulle trasformazioni SVG: http://www.w3.org/TR/SVG/coords.html. Scorri un po 'e puoi leggere molto di più su ciò che ho menzionato sopra.

UPDATE, esempio utilizzo come fare animazioni a livello di programmazione. Conservare le trasformazioni memorizzate separatamente e quando queste sono aggiornate, sovrascrivere/aggiornare la trasformazione dell'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