Question

背景

我有一个图像编辑程序，该程序显示一个画布，用户可以在其中执行多种操作，例如绘制形状。用户绘制的形状被发送到服务器，然后服务器将它们作为元素添加到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);
}

Answer 1

如果仅以90度为增量旋转，则数学运算非常简单。本示例将坐标向左旋转90°。

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

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

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

1 个答案: