マウスカーソルが乗っかってる方角を算出する方法


JavaScript

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;
});

方角のアングルとかを取得するアルゴリズム的には↓

image

関連記事