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 Im假设来自鼠标坐标，因为您已旋转画布，tx和ty现在已“旋转”。

旋转后运动未按预期运行

1 个答案: