Как изменить центр координат в JS

Question

Есть некий объект .box h=100px w=100px Хочу вывести координаты курсора. Отчет координат по-умолчанию идет из верхнего левого угла, а нужно, чтобы отчет координат шел из центра объекта .box. Подскажите, пожалуйста, как это сделать.

Answer 1

Самый простой вариант который я смог придумать.

Чтобы узнать координаты курсора сы вешас на окно евент mousemove который будет срабатывать каждый раз когда мы будет двинать курсор. С помощью событья e и функций clientX мы узнаём текущий координаты на главной страницы, чтобы отчет координат шёл из центра нашего блока мы должны вычитать позицию блока и половину его размера (цирина по ОСИ x и высоту по ОСИ y)

const box = document.querySelector('.box');

window.addEventListener('mousemove', (e) => {
  let leftPos = e.clientX - box.offsetLeft - box.offsetWidth / 2;
  let topPos = e.clientY - box.offsetTop - box.offsetHeight / 2;
  console.log('x:' + leftPos, 'y:' + topPos);
})

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background: royalblue;
}

.box:after {
  content: '';
  position: absolute;
  background-color: darkred;
  width: 10px;
  height: 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="box"></div>

БЛОГ НА HUSL

Как изменить центр координат в JS

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