如何用JavaScript实现屏幕坐标系下点绕原点旋转90/180/270度的函数

需要实现一个函数，接收屏幕坐标系中的点坐标、旋转原点坐标和旋转角度（支持顺时针90/180/270度），返回旋转后的新坐标。

屏幕坐标系的y轴正方向向下，和数学笛卡尔坐标系相反，因此旋转逻辑需要对应调整。针对90/180/270这类整倍数角度，我们可以不用三角函数，直接通过坐标交换和符号反转实现高效计算。

针对90/180/270度的优化实现 #

function rotatePoint(x, y, originX, originY, angle) {
    // 计算点相对于旋转原点的坐标
    const relX = x - originX;
    const relY = y - originY;
    let newRelX, newRelY;

    // 根据顺时针角度处理坐标变换（适配屏幕y轴向下特性）
    switch (angle % 360) {
        case 0:
            newRelX = relX;
            newRelY = relY;
            break;
        case 90:
            // 顺时针90度：相对坐标从(relX, relY)转为(-relY, relX)
            newRelX = -relY;
            newRelY = relX;
            break;
        case 180:
            // 顺时针180度：相对坐标取反
            newRelX = -relX;
            newRelY = -relY;
            break;
        case 270:
            // 顺时针270度：相对坐标从(relX, relY)转为(relY, -relX)
            newRelX = relY;
            newRelY = -relX;
            break;
        default:
            // 非指定角度返回原坐标
            return { x, y };
    }

    // 转换回原坐标系
    return {
        x: newRelX + originX,
        y: newRelY + originY
    };
}

测试示例 #

验证用户给出的场景：点(1,0)绕原点(1,2)顺时针旋转90度

const result = rotatePoint(1, 0, 1, 2, 90);
console.log(result); // 输出 { x: 3, y: 2 }，符合预期

支持任意角度的通用实现 #

如果需要支持任意角度的顺时针旋转，可使用三角函数计算，同时处理屏幕坐标系的特性：

function rotatePoint(x, y, originX, originY, angle) {
    // 将角度转为弧度，顺时针旋转需取负角度
    const rad = -angle * Math.PI / 180;
    const cos = Math.cos(rad);
    const sin = Math.sin(rad);

    // 计算相对坐标
    const relX = x - originX;
    const relY = y - originY;

    // 应用旋转公式
    const newRelX = relX * cos - relY * sin;
    const newRelY = relX * sin + relY * cos;

    // 处理浮点数精度，转换回原坐标系
    return {
        x: Math.round(newRelX + originX),
        y: Math.round(newRelY + originY)
    };
}

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