Obracanie obrazu przez jego własne centrum na płótnie

Question

Mam dziwny problem, gdy robię obrót przekazując literalną wartość kąta (otrzymuję poprzedni kąt drukowany przez konsolę i zamiast tego umieszczam zmienną) działa idealnie, ale jeśli uruchomię kod przekazujący zmienną, jak mój kod poniżej, obraz jest narysowany "więcej góra i więcej w lewo" (przepraszam za mój zły angielski)

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 
    }; 

} 

dziękuję!

Answer 1

Funkcje działają poprzez utworzenie nowej macierzy, a następnie pomnożenie istniejącej transformacji za pomocą tej nowej macierzy.

Oznacza to, że wynik użycia tych funkcji będzie różny w zależności od bieżącego stanu transformacji.

Aby upewnić się, że transformacje są zastosowane do matrycy domyślnej (tożsamości), zresetuj macierz transformacji za pomocą funkcji ctx.setTransform(1, 0, 0, 1, 0, 0), która zastępuje istniejącą macierz nową macierzą domyślną.

Jeśli zrobisz to przed każdym zestawem transformacji, nie będziesz musiał używać zapisywania i przywracania, aby zachować bieżący stan transformacji.