javascript - 在图像旋转 90、180 或 270 度后获取相对于原始图像的图像坐标

Question

我知道这可能有一个简单的数学解决方案，但我只是没能得到它(没有做一些漫长的过程)。

假设我有一张 1200 像素宽 x 800 像素高的风景图片....然后将图片顺时针旋转 90、180 或 270 度。

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

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

语法方面，我正在尝试用 Javascript 计算

谢谢!

Answer 1

执行此操作的数学形式化方法是使用 rotation matrix

例如逆时针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;