Как сделать слежение полукруга за мышью в круге на Vue js?

Question

[alaskafx]

Как сделать слежение голубого полукруга за мышью так, чтобы он вращался внутри этого круша не выходя за его рамки?

Answer 1

[0xD34F]

const circles = reactive(Array.from({ length: 10 }, () => {
  const size = `${50 + Math.random() * 50 | 0}px`;

  return {
    left: `${Math.random() * window.innerWidth | 0}px`,
    top: `${Math.random() * window.innerHeight | 0}px`,
    width: size,
    height: size,
  };
}));

function onMouseMove({ pageX, pageY }) {
  circles.forEach(n => {
    const angle = Math.atan2(-pageX + parseInt(n.left), pageY - parseInt(n.top));
    n.transform = `translate(-50%, -50%) rotate(${angle}rad)`;
  });
}

onMounted(() => document.addEventListener('mousemove', onMouseMove));
onBeforeUnmount(() => document.removeEventListener('mousemove', onMouseMove));

<div v-for="n in circles" :style="n" class="circle"></div>

.circle {
  position: absolute;
  display: inline-block;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: 10px solid silver;
  border-bottom-color: black;
  border-radius: 50%;
}

https://jsfiddle.net/ah0Lywrs/