javascript - 如何在 Javascript 中计算二维旋转

Question

我不太熟悉三 Angular 学，但我只有两个点要在二维中旋转:

                    *nx, ny
               .     -
          .           -
     .  angle          -
*cx,cy.................*x,y

cx, cy = 旋转中心
x,y = 当前x,y
nx, ny = 新坐标

如何计算某个 Angular 新点？

Answer 1

function rotate(cx, cy, x, y, angle) {
    var radians = (Math.PI / 180) * angle,
        cos = Math.cos(radians),
        sin = Math.sin(radians),
        nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
        ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
    return [nx, ny];
}

前两个参数是中心点(第二个点将围绕其旋转的原点)的 X 和 Y 坐标。接下来的两个参数是我们要旋转的点的坐标。最后一个参数是 Angular ，以度为单位。

作为示例，我们将选取点 (2, 1) 并将其围绕点 (1, 1) 顺时针旋转 90 度。

rotate(1, 1, 2, 1, 90);
// > [1, 0]

关于此功能的三个注意事项:

1. 对于顺时针旋转，最后一个参数angle应为正值。对于逆时针旋转(如您提供的图中所示)，它应该是负数。

2. 请注意，即使您提供的参数应该产生一个坐标为整数的点 - 即围绕原点 (0, 0) 将点 (5, 0) 旋转 90 度，这应该产生 ( 0, -5) -- JavaScript 的舍入行为意味着任一坐标仍然可能是一个非常接近预期整数的值，但仍然是一个 float 。例如:

   rotate(0, 0, 5, 0, 90);
   // > [3.061616997868383e-16, -5]
   

   因此，结果数组的两个元素都应为 float 。您可以根据需要使用 Math.round()、Math.ceil() 或 Math.floor() 将它们转换为整数。

3. 最后，请注意，此函数假设 Cartesian coordinate system ，这意味着当您在坐标平面中“向上”移动时，Y 轴上的值会变得更高。在 HTML/CSS 中，Y 轴是反向的 - 当您向下移动页面时，Y 轴上的值会变得更高。