ruota l'immagine dal proprio centro nella tela

Question

Ho uno strano problema, quando eseguo la rotazione passando il valore letterale dell'angolo (ottengo l'angolo precedente stampato dalla console e metto invece la variabile) funziona perfettamente ma se eseguo il codice passaggio di una variabile come il mio codice qui sotto, l'immagine viene disegnata "più in alto e più a sinistra" (scusate per il mio cattivo inglese)

function setImg(src,x,y,angle) 
{ 
    var TO_RADIANS = Math.PI/180; 
    var base_image = new Image(); 
    base_image.src = src 
    base_image.onload = function() { 
     console.log("-->->"+parseFloat(angle)) 
      ctx.save(); //saves the state of canvas 
      ctx.translate(x+(base_image.width/2), y+(base_image.height/2)); //let's translate 
      ctx.rotate(angle*TO_RADIANS); //increment the angle and rotate the image 
      ctx.drawImage(base_image, -(base_image.width/2),-(base_image.height/2)); //draw the image ;) 
      ctx.restore(); //restore the state of canvas 
    }; 

} 

grazie!

Answer 1

Le funzioni ctx.transform, ctx.rotate, ctx.scale e ctx.translate lavoro creando una nuova matrice e quindi moltiplicando la trasformazione esistente con quella nuova matrice.

Ciò significa che il risultato dell'utilizzo di queste funzioni varierà in base allo stato corrente della trasformazione.

Per garantire che le trasformazioni siano applicate alla matrice predefinita (identità), reimpostare la matrice di trasformazione con la funzione ctx.setTransform(1, 0, 0, 1, 0, 0) che sostituisce la matrice esistente con la nuova matrice predefinita.

Se si esegue questa operazione prima di ogni serie di trasformazioni, non sarà necessario utilizzare il salvataggio e il ripristino per mantenere lo stato corrente della trasformazione.