在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

有一种更优雅的方法来解决这个问题而不是你做的方式,但你需要知道如何进行矩阵乘法来理解它.

您可以使用context.currentTransform获取画布的变换矩阵.此矩阵表示当前应用于上下文状态的所有缩放 - 平移和旋转修改器产生的所有坐标修改.这是矩阵的文档.

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

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