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

Question

[ndrpav]

Есть прямоугольник расположенный на странице по определенным координатам x,y и имеет ширину и высоту полученные через getBoundingClientRect. После его поворота на определенный градус все данные, полученные опять таки через getBoundingClientRect, становятся другими (координаты и размеры). Понимаю, что программа школьная по геометрии (вероятно - проекция), но клин поймал не детский. Хелп. Как можно получить верные данные, которые были до вращения?

Comments

[Lynn «Кофеман»]

А на сколько повернули?

[twobomb]

Установить блоку угол 0 получить размеры, вернуть угол. Или запомнить размеры до начала вращения

[ndrpav]

Алексей Тен, например на 60 грд. Но эта переменная не постоянная.

[ndrpav]

twobomb, пробовал, но не корректные данные выдаются, видимо нужен settimeout для отсрочки считывания данных, чтобы успел браузер перерисовать прямоугольник (в виде него используется картинка, а она может быть не слабого разрешения).

Answer 1

[ndrpav]

пока всё, что сумел сварганить это -
h = (height_t * Math.cos(radian) - width_t * Math.sin(radian))/( Math.pow(Math.cos(radian),2) - Math.pow(Math.sin(radian),2));
w = (width_t * Math.cos(radian) - height_t * Math.sin(radian))/(Math.pow(Math.cos(radian),2) - Math.pow(Math.sin(radian),2));
где width_t и height_t - это размеры описывающего квадрата
radian - радианы, преобразованные из градусов.
Только есть особенность этих формул - это "разнос" размеров если градусы выходят за пределы 0-90 (записал код который не дает выйти), но в определенный момент ширина меняется с высотой местами. Думаю теперь провести из изначального прямоугольника пропорцию, что проще, чем изначальные размеры (они трансформируются пользователем).
Либо плюнуть на все это и сделать клон, только без поворота. Правда выйдет другая проблема - вместо квадрата потом будут картинки, которые могут быть огромными.
p.s. Всё же решил сделать клон, только в виде нарисованного прямоугольника rect (fill = none) со всеми характеристиками как у картинки, только без поворота. Работает идеально. Формула (которая выше) конечно рабочая, но я теряюсь в них, так как это только малая часть из всего механизма с этими "прямоугольниками")

Comments

[RAX7]

Попробуй https://developer.mozilla.org/en-US/docs/Web/API/S...

Answer 2

[Robur]

Если у вас есть только описывающий прямоугольник и его координаты - то вы ничего не вычислите - есть бесконечное число квадратов которые дают такой bounding rect. (попробуйте сами нарисовать парочку и понять какой из них - ваш).
самый простой пример - квадрат может быть на самом деле повернут на 0 градусов и ваш синий это и есть то что вам надо. А может быть и повернут и тогда он не то что нужно ;)

вам нужна еще какая-то инфа