Как нарисовать div с углом поворота n описывающий заданные div?

Question

[Расул Какушев]

Здравствуйте. Есть набор заданных div. Как с помощью js построить div которых их описывает и у которого задан угол? Пример результата на скриншоте:



На данном скриншоте есть div с синими рамками которому задан угол 40 и который описывает серые divs. Причем divs могут быть любого размера и угла поворота.

Comments

[RAX7]

1) взять координаты точек углов серых прямоугольников и повернуть на -40 градусов
2) найти рамку (bounding box) для этих точек, взяв минимум и максимум для x и y
3) повернуть координаты рамки на 40 градусов

[Расул Какушев]

RAX7, попробовал данный подход. Результат таков что повернутая рамка не охватывает всех элементов.

[RAX7]

Расул Какушев, ну значит что сделано не так. Оформи песочницу с кодом на https://codepen.io/ или https://jsfiddle.net/ чтобы не гадать на кофейной гуще в чем ошибка.

Answer 1

[RAX7]

Comments

[Человек]

Екарный бабай, вот это уровень.
Вы случайно не Сеньор?
Cколько лет занимаетесь js кодингом?

Answer 2

[Человек]

Основная логика была написана на чистом js, как вы и просили.
Надеюсь вам подойдет мое решение: https://codepen.io/Viperx/pen/jOKaXre

Comments

[Расул Какушев]

В задаче указано что серые divs могут принимать любой размер и угол. В вашем решении все значения захардкодены. (жестко заданы) Мне нужна функция вычисляющая координаты искомой рамки, которая обрамляет вышеуказанные divs и которая повернута на заданный угол. В идеале это будет функция с параметрами selector и angle. По указанным selector она находит нужные элементы и затем рисует рамку их обрамляющую, у которой угол поворота равен angle.
Тут скорее математическая задача на нахождение bound rectangle с заданным углом. Причина задавания вопроса в том что я уже какой день не могу найти нигде решения данной задачи.

[Человек]

Расул Какушев, вы хотите, чтобы функция рисовала рамки
вокруг трех внутренних дивов и также рандомно задавала им угол поворота?