运动不像预期的那样运转后

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现在是“旋转”。