Как получить угол курсора от блока

Question

Немогу понять как написать функцию вращения часовой стрелки за курсором, т.е. что бы один край блока указывал на центр круга, а второй проходил через/к курсору мыши. Язык JS, можно использовать JQuery

свойства блока:

    .krug {
    width: 500px;
    height: 500px;
    background: black;
    border-radius: 50%;
    }

.strelka
{
    width: 10px;
    height: 250px;
    left: 250px;
    top: 250px;
    background: aqua;
    position: absolute;
    transform: rotate(0deg);
    transform-origin: 10% 0%;
}

Это скорее задача по геометрии, но от того не легче(( Примеры задачи: https://imgur.com/a/NnV2Ta9

Answer 1

Можно что-то такое сделать...

var c = document.getElementById('c');
var t = document.getElementById('t');

t.style.top = c.getBoundingClientRect().y +'px';
t.style.left = c.getBoundingClientRect().x + c.getBoundingClientRect().width/2 - t.getBoundingClientRect().width/2 + 'px';

function XY() {
  return {
    x: t.offsetLeft,
    y: t.offsetTop + 50
  };
}

document.addEventListener('mousemove', function(e) {
  var angle = Math.atan2( e.clientX - XY().x, -(e.clientY - XY().y)) * (180 / Math.PI);
  t.style.transform = 'rotate(' + angle + 'deg)';
});

#t{
  position: absolute;
  width: 5px;
  height: 50px;
  background: red;
  transform-origin: 50% bottom 0; /* x y z */
}
#c{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background: gray;
  border-radius: 50px;
  transform: translate(-50%,-50%);
}

<div id='c'></div>
<div id='t'></div>

БЛОГ НА HUSL

Как получить угол курсора от блока

Ответы (1 шт):