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

我正在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为左上点等）

---

不幸的是，数学不是我的强项。希望有人能帮上忙。

尴尬的是，我在问了这个问题之后就直接解决了这个问题

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

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
    };
},

---

有一种比你更优雅的方法来解决这个问题，但是你需要知道如何去理解它

您可以使用

context.currentTransform

获取画布的颜色。此矩阵表示当前应用于上下文状态的所有缩放-平移-和旋转修改器产生的所有坐标修改

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

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

---

我也花了相当长的时间搜索这种查询。在我的例子中，我在画布上试验显示一个点，当用户鼠标点击画布时，即使在旋转之后。问题是，在上下文旋转后，错误显示的点。 我采用了由提供的方法

我已经为我的代码库稍微修改了代码。我已经建立了完整的代码库

---

再次感谢您的代码。

您的图像似乎不正确。您将“鼠标点击”文本放置在元素的“新”旋转位置，而不是旧的位置。不，这实际上是我想要的行为。用户应该单击新对象，并返回坐标，就像在旧的未旋转对象上单击位置一样。我知道，你还画了旋转45度，但实际上旋转了90度。当currentTransform属性被广泛应用时，这将是非常棒的。在那之前，这只是HTML5不是“Flash杀手”的又一个原因。我已经尝试过了，但它不起作用。我应该如何定义内部X和内部Y？我使用```var rect=canvas.getBoundingClientRect（）；```获取内部X

var internal_X=（event.clientX-rect.left）*canvas.widht/rect.widht）

这是我在mousedown上调用的全部函数，用于撤消画布转换我不明白，self.activeObj是什么，你怎么简单地要求obj.angle等。。。请解释一下？另外，我不能使用currentTransform，因为它是一个实验性的特性。我已经尝试过了，但是你是如何找到coords值的？我使用的是

var rect=canvas.getBoundingClientRect（）

var coords.x=（event.clientX-rect.left）*canvas.widt/rect.widt）

，但这给出了错误的答案。你能详细说明一下原始坐标的计算方法吗？为了清楚起见，我让用户在画布旋转后用鼠标在画布上绘制，因此event.clientX是鼠标事件。我之前已经共享了我的工作代码库。您可以进行检查。该代码的作用是，当用户单击画布时，程序将根据画布在浏览器中的位置计算鼠标点，然后如果存在任何旋转，程序将重新计算鼠标点，以便在用户单击的画布上的确切位置显示鼠标点。

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