マウスカーソルが乗っかってる方角を算出する方法
JavaScriptで<div>などにマウスカーソルが乗っかってる方角を算出する方法
中央は考慮してない
const RAD2DEG = 180 / Math.PI;
const directions8 = ["東", "北東", "北", "北西", "西", "南西", "南", "南東"];
const div = document.getElementById("container")
div.addEventListener("mousemove", (event) => {
const rect = event.currentTarget.getBoundingClientRect();
const x = Math.round(event.clientX - rect.left) - (rect.width / 2);
const y = (rect.height / 2) - Math.round(event.clientY - rect.top);
let angle = Math.atan2(y, x) * RAD2DEG;
if (angle < 0) {
angle += 360;
}
const direction = directions8[(Math.round(angle / 45) % 8)];
console.log([angle, direction]);
div.textContent = direction;
});
方角のアングルとかを取得するアルゴリズム的には↓
