javascript - 如何获取 Canvas 上鼠标单击的 "rotated"坐标？

Question

背景

我有一个图像编辑程序，它显示一个 Canvas ，用户可以在其中执行多种操作，例如绘制形状。用户绘制的形状被发送到服务器，然后服务器将它们作为元素添加到 XML 文件中。 XML 文件被发送回客户端。然后，客户端读取此 XML 文件，并为每个元素绘制相应的形状。

我想向我的程序添加新功能。我想让用户可以在本地旋转 View 。也就是说，该用户应该能够单击一个按钮，将 Canvas 向右旋转 90 度。因此，如果形状位于 40x40 Canvas 的位置 (10, 10)，则单击此按钮后它将位于 (30, 10)。

我通过使用旋转和平移实现了这一点，如下所示:

ctx.translate(width/2,height/2);
ctx.rotate(90*Math.PI/180); 
ctx.translate(-width/2,-height/2);

// draw shapes from returned XML file

现在，当从我的 XML 文件中绘制形状时，它们将显示为旋转的。

问题

当我尝试在旋转的 Canvas 上绘制新形状时出现问题。假设我正在绘制一个从 (10, 10) 到 (15, 15) 的矩形。该程序会将这些坐标发送到我的服务器。然后，服务器会将它们添加到 XML 文件中，并将 XML 文件发送回我的客户端。当我的客户完成绘图周期时，它将绘制新的形状。但是，由于 Canvas 已旋转，因此它将在旋转位置处的形状上绘制。

所以我从 (10, 10) 绘制到 (15, 15)，但我在 Canvas 上看到的形状从 (30, 10) 到 (25, 15)。

为了解决这个问题，我的想法是，我不应该向服务器发送鼠标的实际坐标，而是应该向服务器提供坐标，就好像 Canvas 已沿相反方向旋转到与创建的旋转相同的 Angular 通过旋转按钮。

因此，如果旋转度数为 90，并且我单击 (10, 10)，则不会向我的程序提供 (10, 10)，而是向它提供 (10, 30)。这样在绘制它时它会旋转它并且它会出现在正确的位置。

因此我的问题是，如何获得 Canvas 上鼠标单击的“旋转”坐标？ (没有任何外部库)

// Code to draw a rectangle
Rectangle.prototype.handleInput = function() {

    var coord = {};
    var anchor = {};
    var imgData = s.ctx.getImageData(0, 0, s.width, s.height);
    var drawingSquare = false;
    var squareDrawn = false;
    var color, thickness;
    var mouseMoved;

    s.canvas.onmousedown = function(e) {
        mouseMoved = false;
        color = getColor();
        thickness = getThickness();
        anchor.x = e.clientX - s.getX();
        anchor.y = e.clientY - s.getY();

        drawingSquare = true;
        imgData = s.ctx.getImageData(0, 0, s.width, s.height);
    };

    s.canvas.onmousemove = function(e) {
        if (drawingSquare) {
            mouseMoved = true;
            coord.x = e.clientX - s.getX();
            coord.y = e.clientY - s.getY();

            s.ctx.putImageData(imgData, 0, 0);
            Rectangle.draw(anchor.x, anchor.y, coord.x, coord.y, color, thickness);
            squareDrawn = true;
            xml.editRect(anchor.x, anchor.y, getColor(), getThickness(), coord.x, coord.y);
        }
    };

    s.canvas.onmouseup = function(e) {
        drawingSquare = false;
// startX, startY, strokeStyle, lineWidth, endX, endY

if (mouseMoved) {
    sm.save();

    xml.addRect(anchor.x, anchor.y, getColor(), getThickness(), coord.x, coord.y);
}

Answer 1

如果您仅以 90 度的增量旋转，那么数学就相当简单了。本示例将坐标向左旋转 90°。

unrotated.x = anchor.y;
unrotated.y = s.height - anchor.x;

其他旋转类似，只是交换 x 和 y 位置以及宽度和高度。