Привет!
Есть див в виде квадрата. Если зажать любой из углов и начать перемещать мышь, то с помощью либы JS я смогу получать дельта значения перемещения. Например, если курсор уведем вниз на 2 пикселя, то получим delta = { x: 0, y: 2 }, если курсор влево на 10, то delta = { x: -10, y: 0 }, если по диагонали к правому верхнему углу на 5 пикселей то delta = { x: 5, y: -5 }.
Я уже сделал ресайз по следующему принципу: ширина + delta.x, высота + delta.y, все работает нормально.
Теперь уже второй день пытаюсь сделать вращение фигуры относительно ее центра.
Нам известно:
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