如何获得在画布上单击鼠标的“旋转”坐标？答案

【问题标题】：How can I get the "rotated" coordinates of a mouse-click on a canvas?如何获得在画布上单击鼠标的“旋转”坐标？
【发布时间】：2018-11-29 18:50:51
【问题描述】：

背景

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

我想为我的程序添加新功能。我想这样做，以便用户可以在本地旋转视图。也就是说，该用户应该能够单击一个按钮，该按钮会将画布向右旋转 90 度。因此，如果一个形状位于 40x40 画布的 (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 文件中绘制形状时，它们会出现旋转。

问题

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

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

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

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

因此我的问题是，如何获得鼠标在画布上单击的“旋转”坐标？（没有任何外部库）

// 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);
}

【问题讨论】：

标签： javascript html canvas rotation

【解决方案1】：

如果您只是以 90 度为增量旋转，那么数学运算相当简单。此示例将坐标向左旋转 90°。

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

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

【讨论】：