運動不像預期的那樣運轉後

Question

我有一個畫布，我使用圖像，移動，旋轉和縮放。一切工作正常，直到我試圖結合所有轉換。例如，我正在根據用戶鼠標移動差異來移動圖像，但是如果我首先旋轉圖像讓我們說180度，那麼圖像移動相對於鼠標移動反轉。我該如何解決這個問題？

 ctx.clearRect(0, 0, 320, 580); 
     ctx.save(); 
     ctx.translate(canvas.width/2, canvas.height/2); 
     ctx.scale(scale, scale); 
     ctx.rotate(toRad(angle)); 
     ctx.translate(-(canvas.width/2), -(canvas.height/2)); 
     ctx.drawImage(image, tx, ty, image.width, image.height); 
     ctx.restore(); 

Answer 1

如果可能，需要多發一些代碼，但我相信這個問題與您的翻譯有關。下面是一個類似的例子，雖然移動不依賴於鼠標。

Live Demo

// save the context 
    ctx.save(); 
    // translate it to the objects x and y, basically your taking the canvas and moving it to each object. 
    ctx.translate(box.x, box.y); 
    // now rotate it 
    ctx.rotate(box.angle); 
    // -5 is half of the box width and height 0,0 is the boxes location, im drawing it at half the width and height to set the rotation origin to the center of the box. 
    ctx.fillRect(-5,-5, 10,10); 
    // now restore 
    ctx.restore(); 

你tx和ty林假設是從鼠標COORDS，以及因爲你已經旋轉畫布上tx和ty現在是「旋轉」。