Question

我知道可能有一个简单的数学解决方案，但我还没有能够得到它（没有做一些漫长的过程）。

假设我有一个1200px宽x 800px高的风景图像....然后图像顺时针旋转90度，180度或270度。

如果在旋转的图像上选择了一个点（坐标），我该如何确定原始非旋转图像上的坐标是什么？

作为一个简单的例子：如果将上面的图像旋转180度，然后将坐标设置为100,100（左上角）......同样的坐标将是1100,700（右下角）非旋转图像。

语法明智，我试图在Javascript

中计算

谢谢！

Answer 1

进行数学正式的方法

例如，对于逆时针90度旋转，旋转矩阵将是：

R(90) = [0 -1]
        [1  0]

矩阵乘法公式为：

[x90] = [0 -1][x]
[y90]   [1  0][y]

使用matrix multiplication将其展开为标准表示法：

x90 = -y;
y90 =  x;

请注意，这会围绕原点[0,0]旋转，因此您必须进行标准化以获得所有+ ve坐标。用javascript编写，这可能是：

x90 = ymax - y;
y90 = x;

这里[x，y]是原始坐标，[x90，y90]是旋转坐标，[xmax，ymax]是原始图像的宽度和高度。

对于180度，旋转矩阵为：

R(180) = [-1  0]
         [ 0 -1]

使用规范化转换为javascript：

x180 = xmax - x;
y180 = ymax - y;

对于逆时针270度，旋转矩阵为：

R(270) = [ 0 1]
         [-1 0]

使用规范化转换为javascript：

x270 = y;
y270 = xmax - x;

Answer 2

TL; DR：

x' = x*cos(θ) - y*sin(θ)
y' = x*sin(θ) + y*cos(θ)

其中{x,y}是您的原始点，θ是旋转角度，{x',y'}是新点。