正交场景非1:1比例时，旋转矩阵缩放异常的修正方法

这个坑我之前踩过好几次！本质问题在于你没把正交视口的宽高比纳入旋转矩阵的计算中，导致旋转后的坐标缩放没有适配新的轴单位长度。

问题根源拆解 #

当场景是1:1（600×600）时，x轴和y轴的单位长度是等价的——1个单位的x对应600px，1个单位的y也对应600px，所以标准旋转矩阵可以直接正确映射坐标。

但改成600×1200后，x轴1单位=600px，y轴1单位=1200px，两个轴的“缩放系数”不一样了。这时候直接用标准旋转矩阵，旋转后原本属于y轴方向的坐标会被按x轴的缩放系数计算，自然就出现了“水平轴缩放和未旋转时一样”的错误。

拿你的例子说：

• 未旋转时，30px的x方向对应30/600=0.05的归一化值，正确；
• 旋转90度后，原本y方向的30px应该对应30/1200=0.025的归一化值，但系统还是用了x轴的0.05来计算水平方向的缩放，结果就会显示成0.05×600=30px，但实际上这个值对应的y方向长度是0.05×1200=60px，等于把旋转后的图形在水平方向拉伸了一倍。

具体解决方法 #

有两种常用的校正方式，选哪种取决于你的坐标变换流程：

方法1：手动校正坐标（适合自己写变换逻辑的场景）

在应用旋转矩阵前后，加入宽高比的归一化/还原步骤：

1. 先计算视口宽高比：aspect = 场景宽度 / 场景高度（这里就是600/1200=0.5）
2. 旋转前，把x坐标乘以aspect，让x轴和y轴的单位长度统一（都基于场景高度）
3. 应用标准旋转矩阵
4. 旋转后，把x坐标除以aspect，还原回原视口的坐标空间

方法2：修改旋转矩阵（适合整合到矩阵运算链的场景）

直接把宽高比嵌入旋转矩阵，让旋转时自动适配轴的缩放差异。标准2D旋转矩阵是：

[ cosθ  -sinθ ]
[ sinθ   cosθ ]

修改为适配宽高比的版本：

[ cosθ    -sinθ / aspect ]
[ sinθ*aspect   cosθ     ]

用你的例子验证：θ=90°时，cosθ=0，sinθ=1，aspect=0.5，代入后矩阵变成：

[ 0   -1/0.5 ] = [ 0  -2 ]
[ 1*0.5  0 ]   [ 0.5  0 ]

原本y方向的0.025（对应30px）旋转到x方向后，计算结果是-0.025 / 0.5 = -0.05，对应-0.05×600=-30px，完全符合预期的30px宽度。

额外注意点 #

如果你用的是OpenGL/WebGL这类图形API，要确保模型矩阵（旋转矩阵）和正交投影矩阵的相乘顺序正确——应该是投影矩阵 × 模型矩阵 × 顶点坐标，而且投影矩阵本身要正确包含宽高比参数（比如glOrtho的参数要基于宽高比计算），避免重复校正。

内容的提问来源于stack exchange，提问作者Elias