首页 文章

如何在Javascript中计算2D中的旋转

提问于
浏览 次
24

我不是那么熟悉的三角函数，但我在2D中只有两个点可以旋转：

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

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

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

javascript rotation trigonometry

3 回答

  • 75
    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]

    关于这个功能的三个注释：

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

    • 请注意，即使你提供的参数应该产生一个坐标为整数的点 - 即将点（5,0）绕原点（0,0）旋转90度，这应该产生（0，-5） - JavaScript的舍入行为意味着任何一个坐标仍然可能是一个令人沮丧地接近预期整数的值，但仍然是一个浮点数 . 例如：

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

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

    • 最后，请注意，此函数假定为Cartesian coordinate system，这意味着当您在坐标平面中使用"up"时，Y轴上的值会变得更高 . 在HTML / CSS中，Y轴反转 - 当您向下移动页面时，Y轴上的值会变得更高 .
    回复于
  • 5

    • 首先，将旋转中心转换为原点

    • 计算新坐标（nx，ny）

    • 转换回原始旋转中心

    Step 1

    你的新观点是

    • 中心：（0,0）

    • 点：（x-cx，y-cy）

    Step 2

    • nx =（x-cx）* cos（theta） - （y-cy）* sin（theta）

    • ny =（y-cy）* cos（theta）（x-cx）* sin（theta）

    Step 3

    转换回原始旋转中心：

    • nx =（x-cx）* cos（theta） - （y-cy）* sin（theta）cx

    • ny =（y-cy）* cos（theta）（x-cx）* sin（theta）cy

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

    回复于
  • 0

    以上接受的答案对我来说不正常，轮换是相反的，这里是工作功能

    /*
 CX @ Origin X  
 CY @ Origin Y
 X  @ Point X to be rotated
 Y  @ Point Y to be rotated  
*/
    function rotate(CX, CY, X, Y, angle) {
        var rad = angle * Math.PI / 180.0;
        var nx = Math.cos(rad) * (X-CX) - Math.sin(rad) * (Y-CY) + CX;
        var ny = Math.sin(rad) * (X-CX) + Math.cos(rad) * (Y-CY) + CY;
        return [nx,ny];
    }
    回复于

相关问题