html - 旋转后运动未按预期工作

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

如果可能，需要发布更多代码，但我相信问题与您的翻译有关。这是一个类似的例子，虽然移动不依赖于鼠标。

现场演示

    // 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我假设来自鼠标坐标，因为您已经旋转了画布tx并且ty现在“旋转”了。