Как заставить треугольник поворачиваться за мышкой?

Question

[AntonVirovets]

Здравствуйте. Есть треугольник, он должен поворачиваться по своей оси за курсором мыши.. Я вообще не понимаю как это реализовать..Вроде мне кажется нужно привязать координаты верхнего края треугольника к координатам мыши..но у меня ничего не получилось. Я даже не представляю как это можно сделать)

Comments

[vith77]

Подписаться на перемещение мыши - это даст координаты. Вращать треугольник можно с помощью CSS transform: rotate

Answer 1

[Константин Китманов]

Это удобно делать с помощью несложной векторной математики.

Выбираем начало координат (видимо, центр треугольника?)
В onmousemove вычитаем текущие координаты мыши из начала координат, получаем пару чисел, это наш вектор.
Находим под каким углом он выходит из начала координат:

function vecAngle(vec) {
    return Math.atan2(vec.y, vec.x);
}

Имейте ввиду, это будет угол в радианах (когда 2 * Math.PI === 360 градусов).
Теперь просто поворачиваем треугольник на этот угол с помощью transform, или что там у вас.