坐标旋转计算异常排查：调用rotateX(1,0,45°)结果不符预期

首先，你的核心问题有两个：

1. 对坐标旋转的本质存在误解，你期望的[1,1]并不是点(1,0)绕原点旋转45度的结果；
2. 你得到的[-0.7071067811865475, 0.7071067811865476]结果不符合预期，大概率是旋转方向、坐标系理解偏差，或是调用时的角度参数错误。

一、先纠正旋转的基本概念 #

坐标旋转是保持点到原点距离不变的几何变换：点(1,0)到原点的距离是1，而(1,1)到原点的距离是√2≈1.414，显然这不是旋转的结果——你混淆了「旋转到45度方向」和「缩放后落到y=x直线上」这两个概念。

点(1,0)绕原点逆时针旋转45度的正确结果是：
(cos45°, sin45°) ≈ (0.7071, 0.7071)
这个点在y=x直线上，且到原点的距离仍为1，完全符合旋转的定义。你给出的[0,0],[1,1],[2,2]是y=x直线上的点，但这些点到原点的距离依次为0、√2、2√2，属于缩放+沿直线取值，并非旋转操作。

二、你的代码为什么得到异常结果？ #

你的rotateX函数实现的是标准2D绕原点逆时针旋转公式：

function rotateX(x, y, angle) {
  return [x * Math.cos(angle) - y * Math.sin(angle), x * Math.sin(angle) + y * Math.cos(angle)]
}

当传入rotateX(1, 0, degreesToRadians(45))时，正确计算结果应该是[0.7071..., 0.7071...]，而你得到负X值的结果只有两种可能：

• 你实际传入的角度是135度（而非45度）：因为cos135°=-√2/2，sin135°=√2/2，代入公式后正好得到[-0.7071..., 0.7071...]；
• 你混淆了坐标系Y轴方向：部分图形系统中Y轴向下（而非数学中的Y轴向上），会导致旋转视觉上反向，但不会直接得到负X值。

三、如何实现你想要的效果？ #

如果你确实想让点(1,0)变换到(1,1)，这不是旋转操作，而是以下两种方式之一：

• 单纯平移：直接给Y坐标加1，即[x, y + 1]；
• 缩放旋转结合：将旋转后的结果乘以√2，即[0.7071*√2, 0.7071*√2] = [1,1]，但这已经不属于纯旋转范畴。

如果你是想实现顺时针旋转45度，需要修改旋转公式：

function rotateClockwise(x, y, angle) {
  // 顺时针旋转等价于逆时针旋转负角度
  return [x * Math.cos(angle) + y * Math.sin(angle), -x * Math.sin(angle) + y * Math.cos(angle)]
}

调用rotateClockwise(1, 0, degreesToRadians(45))会得到[0.7071..., -0.7071...]，这是点(1,0)顺时针旋转45度后的正确结果。

四、正确的2D旋转公式总结 #

• 绕原点逆时针旋转θ：

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

• 绕原点顺时针旋转θ：

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

• 核心特征：旋转后点到原点的距离与原距离完全一致。

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