在 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 提供代码。