自定义零度方位的元素到鼠标光标角度计算函数开发问题

首先明确Math.atan2(mouseY-elY, mouseX-elX)的特性：它返回从**正东方向（x轴正方向）**逆时针到鼠标位置的弧度值，范围是-π到π（对应角度-180°到180°）。我们需要基于此转换不同方位的零度，并最终将角度锁定在0°~360°之间。

完整实现代码 #

function getAngleToCursor(el, evt, orientation = "north") {
    const mouseX = evt.clientX
    const mouseY = evt.clientY
    
    const elRect = el.getBoundingClientRect()
    const elX = elRect.left + elRect.width / 2
    const elY = elRect.top + elRect.height / 2

    const rads = Math.atan2(mouseY - elY, mouseX - elX)
    let angle = 0

    // 切换零度方位
    switch(orientation) {
        case "west":
            angle = rads * 180 / Math.PI + 180
            break;

        case "north":
            // 正北为零度：在原生正东零度基础上逆时针加90°
            angle = rads * 180 / Math.PI + 90
            break;  

        case "east":
            // 正东为零度：直接使用原生转换结果
            angle = rads * 180 / Math.PI
            break;  
        
        case "south":            
            // 正南为零度：在原生正东零度基础上顺时针减90°
            angle = rads * 180 / Math.PI - 90
            break;
    }

    // 确保角度在0°到360°之间
    angle = angle % 360
    if (angle < 0) {
        angle += 360
    }

    return angle
}

各方位逻辑说明 #

• east（正东）：Math.atan2原生以正东为零度，直接转换为角度后，通过取模和负数修正，将-180°~180°转为0°~360°。
• north（正北）：正北比正东逆时针偏移90°，因此在原生角度值上加90°，再调整范围。
• south（正南）：正南比正东顺时针偏移90°，等价于逆时针偏移270°，因此在原生角度值上减90°，再调整范围。
• west（正西）：保留原有逻辑，加180°后调整范围，确保正西方对应0°。

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