Рассчитать правильную ширину и высоту при изменении размера повернутого элемента

Question

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

Вот упрощенный код.

// rotating the element
selection.style.transform = "rotate(" + degrees + "deg)";

...

// scaling the element
var left = selection.offsetLeft;
var top = selection.offsetTop;
selection.style.width = (e.clientX - left) + "px";
selection.style.height = (e.clientY - top) + "px";

Как рассчитать новую ширину / высоту при повороте элемента и его новую позицию?

Пример полного кода будет слишком длинным, поэтому я сделал fiddle показывая текущее состояние и проблему.

Спасибо за любую помощь, ссылку на необходимый пример математики или кода.

Answer 1

Наконец-то я нашел рабочее решение.Ключ должен был вычислить новую центральную точку, получив текущую позицию мыши и противоположный угол.Теперь я поворачиваю обе точки в их неповоротное состояние и получаю границы для использования.Соответствующий код выглядит следующим образом:

// the current rotation angle in degrees
angle = me.angle;
// the current mouse point (dragging a selection control)
var mousePoint = new Point(e.clientX, e.clientY);
// Get opposite point. Rotate it to get the visual position
var topLeft = new Point(left, top).rotate(center, angle);
// calculate the new center 
var centerPoint = mousePoint.getMiddle(topLeft);
// rotate the opposite point back around the new center
var topLeftRotated = topLeft.rotate(centerPoint, -angle);
// rotate the mouse point around the new center.
var mousePointRotated = mousePoint.rotate(centerPoint, -angle);

// now we have the top left and lower right points and 
// can calculate the dimensions
var x1 = topLeftRotated.x;
var x2 = mousePointRotated.x;
var w = x2-x1;
var y1 = topLeftRotated.y;
var y2 = mousePointRotated.y;
var h = y2-y1;

me.selection.style.width = w + "px";
me.selection.style.height = h + "px";
me.selection.style.left = x1 + "px";
me.selection.style.top = y1 + "px";

См. Обновленную скрипку (Примечание. Это скорее подтверждение концепции, а не готовое к производству решение).

Iоткрыт для более элегантных решений.

Answer 2

Может быть getBoundingClientRect - это то, что вы хотите.

console.log(document.querySelector('.rotate').getBoundingClientRect())

.rotate {
  width: 80px;
  height: 50px;
  background: blue;
  transform: rotate(45deg);
}

<div class="rotate"></div>

Вы также можете упростить жизнь и просто использовать преобразование масштаба?