Задать вопрос
@Vadim1899

Вычислить угол поворота вокруг элемента оси по 2 или 3 точкам?

Привет!
Есть див в виде квадрата. Если зажать любой из углов и начать перемещать мышь, то с помощью либы JS я смогу получать дельта значения перемещения. Например, если курсор уведем вниз на 2 пикселя, то получим delta = { x: 0, y: 2 }, если курсор влево на 10, то delta = { x: -10, y: 0 }, если по диагонали к правому верхнему углу на 5 пикселей то delta = { x: 5, y: -5 }.

Я уже сделал ресайз по следующему принципу: ширина + delta.x, высота + delta.y, все работает нормально.

Теперь уже второй день пытаюсь сделать вращение фигуры относительно ее центра.

L3jYswNhNCo.jpg?size=853x728&quality=96&sign=2f6e6303d59a72f6f8d4d9c44db90d78&type=album

Нам известно:
1. Координаты центра center = { x, y }
2. xy координата левого верхнего угла до перемещения p1 = { x, y }
3. xy координата левого верхнего угла после перемещения (xy до перемещения + delta xy) p2 = { x, y }
4. ширина и высота элемента
5. изначально угол вращения 0 градусов
Также можно вычислить координаты остальных углов квадрата, т.к. мы знаем левый верхний угол, ширину и высоту (вдруг понадобятся остальные углы).

Вроде задача простая: angle = atan2(center.y - p2.y, center.x - p2.x). Затем радианы переводим в градусы, но почему то угол получаем неверный, тк при вращении фигура начинает дергаться, угол расчитывается неверно.

Пробовал так: atan2(p1 .y - p2.y, p1 .x - p2.x), аналогично.
Еще пробовал atan2(delta.y, delta.x), т.к. delta это по сути и есть разность между координатой старой и новой, но тоже угол рассчитывается неверно.

Уверен, ошибка очень банальная, но уже второй день ломаю голову, инфы перечитал столько, что в голове уже каша. Может можно как-то по другому рассчитать угол?

UPD: codepen
  • Вопрос задан
  • 296 просмотров
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 2
twobomb
@twobomb
Vadim Stepanenko, У вас какие-то левые координаты, что центра что позиции курсора, отсюда и ошибка
Ответ написан
RAX7
@RAX7
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы