返回未转化的小鼠上HTML5画布旋转对象后的坐标(Returning un-transformed

我在旋转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:

还有一个更优雅的方式来解决这个问题比你做的方式，但你需要知道如何做矩阵乘法去了解它。

您可以使用context.currentTransform获得变换矩阵的画布。 该矩阵代表所有当前应用于上下文状态的坐标从所有横向扩展translate-所得修改和旋转改性剂。 这里是矩阵的文档 。

为了将内部坐标到屏幕坐标，使用这些公式：

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 。

我稍微修改了代码为我的代码库。 我已经把我的完整的代码库在这里 。

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为您的代码。

文章来源: Returning un-transformed mouse coordinates after rotating an object on html5 canvas