45

我对三角学不是很熟悉，但我只有两点可以在 2D 中旋转：

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

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

如何计算某个角度的新点？

4

5 回答 5

121 
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 坐标。接下来的两个参数是我们将要旋转的点的坐标。最后一个参数是角度，以度为单位。

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

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

关于这个函数的三个注意事项：

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

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

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

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

  3. 最后，请注意，此函数假定为笛卡尔坐标系，这意味着 Y 轴上的值随着您在坐标平面中“向上”移动而变得更高。在 HTML/CSS 中，Y 轴是倒置的——当您向下移动页面时，Y 轴上的值会变高。

于 2013-07-01T18:31:01.893 回答
7
  1. 首先，将旋转中心平移到原点
  2. 计算新坐标 (nx, ny)
  3. 平移回原来的旋转中心

步骤1

你的新观点是

  1. 中心：（0,0）
  2. 点：（x-cx，y-cy）

第2步

  1. nx = (x-cx)*cos(theta) - (y-cy)*sin(theta)
  2. ny = (y-cy)*cos(theta) + (x-cx)*sin(theta)

第 3 步

平移回原来的旋转中心：

  1. nx = (x-cx)*cos(theta) - (y-cy)*sin(theta) + cx
  2. ny = (y-cy)*cos(theta) + (x-cx)*sin(theta) + cy

为了更深入的解释，有一些花哨的图表，我建议看这个。

于 2013-07-01T18:15:48.487 回答
5

以上接受的答案对我不起作用，旋转反转，这是工作功能

/*
 CX @ Origin X  
 CY @ Origin Y
 X  @ Point X to be rotated
 Y  @ Point Y to be rotated  
 anticlock_wise @ to rotate point in clockwise direction or anticlockwise , default clockwise 
 return @ {x,y}  
*/
function rotate(cx, cy, x, y, angle,anticlock_wise = false) {
    if(angle == 0){
        return {x:parseFloat(x), y:parseFloat(y)};
    }if(anticlock_wise){
        var radians = (Math.PI / 180) * angle;
    }else{
        var radians = (Math.PI / -180) * angle;
    }
    var cos = Math.cos(radians);
    var sin = Math.sin(radians);
    var nx = (cos * (x - cx)) + (sin * (y - cy)) + cx;
    var ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
    return {x:nx, y:ny};
 }
于 2018-04-03T13:40:29.567 回答
4

根据维基百科上的极坐标系文章：

x = r * cos(deg)
y = r * sin(deg)
  • r(半径) 等于 和 之间的Rotation Centre距离Rotated Point
  • deg(度) 是以度为单位的角度
于 2020-09-26T10:09:53.657 回答
1

我认为最好使用矩阵进行此类操作。

这是 gl-matrix 的示例（但您也可以使用 THREEJS 之类的东西）。

import * as glm from 'gl-matrix';
const rotateVector = (() => {
  
  const q = glm.quat.create();  
  // const m = glm.mat4.create(); // 2nd way

  return (v: glm.vec3, point: glm.vec3, axis: glm.vec3, angle: number) => {

      glm.quat.setAxisAngle(q, axis, angle);
      // glm.mat4.fromRotation(m, angle, axis); // 2nd way
      glm.vec3.sub(v, v, point);
      glm.vec3.transformQuat(v, v, q);
      // glm.vec3.transformMat4(v, v, m); // 2nd way
      glm.vec3.add(v, v, point);
      return v;
  }
})();

在 2D 情况下，您需要围绕 z 轴旋转：

rotateVector([x, y, 0], [cX, cY, 0], [0, 0, 1], angleInRadians);
于 2020-08-13T14:42:24.243 回答