Come posso spostare l'immagine della tela ruotata senza disorientamento?

Question

Ho un'immagine caricata nell'area di disegno. Non posso (trascinare) spostare l'immagine correttamente, dopo che è stata ruotata. In realtà, si muove ma si muove in base al piano delle coordinate dell'immagine. Quindi spostando un'immagine ruotata di 90 gradi verso destra, si sposta verso il basso e non verso destra come previsto. Quale potrebbe essere un buon modo per risolvere questo problema?

Questa è la mia funzione di disegno:

function draw(){ 
    var im_width = parseInt(imageObj.width + resizeAmount); 
    var im_height = parseInt(imageObj.height + resizeAmount); 
    var rotationAmount = rotationVal - prevRotation; 
    prevRotation = rotationVal; 

    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.translate(canvas.width/2, canvas.height/2); 
    context.rotate(rotationAmount * Math.PI/180); 
    context.translate(-canvas.width/2, -canvas.height/2); 
    context.drawImage(imageObj, moveXAmount, moveYAmount, im_width, im_height);  
} 

Ecco la jsdiddle dove è possibile simulare e vedere quello che voglio dire.

PS: È possibile ruotare l'immagine con il cursore a sinistra. Il cursore inferiore serve per lo zoom. Si prega di ri-eseguire il violino se l'immagine non appare nel primo carico.

Answer 1

Ripristina le trasformazioni dopo il disegno. Gli eventi del mouse vengono trasformati anche quando vengono applicati al contesto della tela, quindi l'uso delle trasformazioni solo quando il disegno è in grado di risolverlo. Tuttavia, anche questo richiede il codice per utilizzare valori assoluti, ad esempio:

function draw(){ 
    var im_width = parseInt(imageObj.width + resizeAmount, 10); 
    var im_height = parseInt(imageObj.height + resizeAmount, 10); 
    var rotationAmount = rotationVal; // disabled: - prevRotation; 

    context.clearRect(0, 0, canvas.width, canvas.height); 

    // move to origin first 
    context.translate(moveXAmount, moveYAmount); 

    // rotate 
    context.rotate(rotationAmount * Math.PI/180); 

    // change to translate back based on image size 
    // (remember to compensate for scale, not shown here) 
    context.translate(-imageObj.width/2, -imageObj.height/2); 
    context.drawImage(imageObj, 0, 0, im_width, im_height); 

    // reset transforms (identity matrix) 
    context.setTransform(1,0,0,1,0,0); 
} 

Modified fiddle

Opzionalmente si avrebbe bisogno di utilizzare matrice inversa. Questo è qualcosa che sarà disponibile più tardi quando possiamo estrarre una SVGMatrix basata sulla matrice di trasformazione corrente, ma questo non è ampiamente disponibile in questo momento. Altrimenti la matrice inversa verrebbe applicata alla posizione x/y del mouse per ordinare, come suggerisce il nome, inversione dell'effetto della trasformazione principale.

Opzionalmente utilizzare una soluzione di matrice di trasformazione personalizzata per tenere traccia della trasformazione (ti invito a verificare il mio approccio a questo here, è gratuito).

PS: risolto anche il problema di caricamento dell'immagine (vedere il violino).