调整旋转元素的大小时计算正确的宽度和高度

Question

I'm creating a selection tool where the user may scale and rotate an HTMLElement using a selection control element. Rotating the element and scaling it when it's not rotated, works fine. I'm now a bit lost with the math to scale an element which is already rotated.

Here is the simplified code.

// 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";

How do I calculate the new width/height when the element is rotated and its new position?

A full code example would be a bit too long so I've made a fiddle showing the current state and issue.

Thanks for any help, link to the necessary math or code example.

Answer 1

Maybe getBoundingClientRect is what you want.

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

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

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

You could also make life easy and just use a scale transformation?

Answer 2

Finally I've found a working solution. The key was to calculate the new center point by getting the current mouse position and the opposite corner. Now I rotate both points back to its unrotated state and get the bounds to use. The relevant code looks like this:

// 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";

See the updated fiddle (Note. This is more a proof of concept and no production ready solution.)

I'm open to more elegant solutions.