在html5画布上旋转对象后返回未变换的鼠标坐标

Question

我在html5画布中围绕变量原点旋转对象。

如果用户点击新旋转的矩形中的给定点，我需要将返回的鼠标坐标围绕同一个原点旋转回来。

我做了一个非常快速的绘图，希望更好地说明：

我基本上需要一个函数，它将实际点击的鼠标坐标作为x和y，并在它旋转之前将它们转换为对象位置。

var origin = {
        x: 100,
        y: 100
};

var angle = 45;

function transformCoordinates(x,y){

         //Perform calculation to transform coordinates

         return {
                 x : newx,
                 y : newy
         };
}

可用变量将是旋转和角度的变换原点。以及画布上的鼠标单击坐标（相对于画布本身，0,0是左上角等）

不幸的是数学不是我的强项。希望有人可以提供帮助。

Answer 1

解决这个问题的方法比你做的更优雅，但你需要知道如何做matrix multiplication来理解它。

您可以使用context.currentTransform获取画布的transformation matrix。此矩阵表示当前应用于上下文状态的所有缩放 - 平移和旋转修改器产生的所有坐标修改。 Here is the documentation of the matrix

要将内部坐标转换为屏幕坐标，请使用以下公式：

screen_X = internal_X * a + internal_Y * c + e;    
screen_Y = internal_X * b + internal_Y * d + f;

Answer 2

令人尴尬的是，在提出问题之后，我直接解决了这个问题。

如果其他人需要同样的功能，我就是这样做的：

getTransformedCoords : function(coords){
    var self = this;
    var obj = self.activeObj;
    var angle = (obj.angle*-1) * Math.PI / 180;   
    var x2 = coords.x - obj.left;
    var y2 = coords.y - obj.top;
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newx = x2*cos - y2*sin + obj.left; 
    var newy = x2*sin + y2*cos + obj.top;

    return {
        x : newx,
        y : newy
    };
},

Answer 3

我也在相当长的一段时间内搜索这种查询。就我而言，当用户在画布上单击鼠标时，即使在旋转后，我也在画布上进行实验以显示点。问题是上下文旋转后，错误显示的点。 我采用了gordyr提供的方法。

我已经为我的代码库稍微修改了代码。我已经输入了完整的代码库here。

let model = {
    ctx: {},
    canvas: {},
    width: 500,
    height: 500,
    angleInRad: 0
};
function getTransformedCoords(coords) {
    var angle = (model.angleInRad * -1);
    var x2 = coords.x;
    var y2 = coords.y;
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newx = Math.floor(x2 * cos - y2 * sin);
    var newy = Math.floor(x2 * sin + y2 * cos);

    return new Position(newx, newy);
}

再次感谢您gordyr的验证码。