360° 拖動旋轉的角度計算原理
簡化的 正方形 div demo
專注講清楚「點擊 / 拖動如何計算角度」這個原理，沒有精美 UI哦
- 中間標注中心點
- 鼠標點擊或拖動時，計算當前位置相對于中心的角度
- 在頁面上實時顯示角度
代碼示例（原生 HTML + JS）
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>角度計算原理 Demo</title>
<style>body { display:flex;align-items:center;justify-content:center;height:100vh;margin:0;font-family:sans-serif; }.box {width:300px; height:300px;border:2px dashed #888;position:relative;background:#f9f9f9;}.center {position:absolute;left:50%; top:50%;transform:translate(-50%,-50%);width:8px; height:8px;background:red; border-radius:50%;}.dot {position:absolute;width:10px; height:10px;background:blue; border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;}.info {margin-top:20px; font-size:16px; text-align:center;}
</style>
</head>
<body><div class="wrap"><div class="box" id="box"><div class="center"></div><div class="dot" id="dot"></div></div><div class="info" id="info">點擊或拖動藍點，顯示角度</div></div><script>
(function(){const box = document.getElementById('box');const dot = document.getElementById('dot');const info = document.getElementById('info');let dragging = false;function computeAngle(evt){const rect = box.getBoundingClientRect();const cx = rect.left + rect.width/2;const cy = rect.top + rect.height/2;const dx = evt.clientX - cx;const dy = evt.clientY - cy;// atan2: 右方為0°，逆時針為正。我們希望0°在正上方，順時針為正。let raw = Math.atan2(dy, dx) * 180 / Math.PI;let angle = (raw + 450) % 360; return {angle, x:evt.clientX, y:evt.clientY};}box.addEventListener('mousedown', e=>{dragging = true;update(e);});window.addEventListener('mousemove', e=>{if(dragging) update(e);});window.addEventListener('mouseup', ()=> dragging=false);box.addEventListener('click', e=>{update(e);});function update(e){const {angle, x, y} = computeAngle(e);dot.style.left = (x - box.getBoundingClientRect().left) + 'px';dot.style.top = (y - box.getBoundingClientRect().top) + 'px';info.textContent = "角度: " + angle.toFixed(1) + "°";}
})();
</script>
</body>
</html>
工作原理
-
取中心點坐標
const cx = rect.left + rect.width/2; const cy = rect.top + rect.height/2; -
求向量 (dx, dy)
const dx = evt.clientX - cx; const dy = evt.clientY - cy; -
用 atan2 計算角度
-
Math.atan2(dy, dx)→ 返回弧度，范圍-π ~ π，0° 在右側，逆時針為正 -
轉換到度數并修正到「0° 在正上方，順時針遞增」：
let raw = Math.atan2(dy, dx) * 180 / Math.PI; let angle = (raw + 450) % 360;
-
-
實時顯示角度，同時讓藍點跟隨鼠標。
)
