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

我正在创建一个选择工具，用户可以使用选择控件元素缩放和旋转HTMLElement。旋转元素并在未旋转时缩放，效果良好。我现在对缩放已经旋转的元素的数学有点迷茫

下面是简化的代码

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

旋转图元及其新位置时，如何计算新的宽度/高度

完整的代码示例可能有点太长，因此我制作了一个示例来显示当前状态和问题

---

感谢您的帮助，请链接到必要的数学或代码示例。

也许

getBoundingClientRect

就是您想要的

console.log（document.querySelector（'.rotate'）.getBoundingClientRect（））

。旋转{
宽度：80px；
高度：50px；
背景：蓝色；
变换：旋转（45度）；
}

---

我终于找到了一个有效的解决方案。关键是通过获取当前鼠标位置和相对的角点来计算新的中心点。现在我将两个点旋转回其未旋转状态，并获得要使用的边界。 相关代码如下所示：

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

见 （注意。这更多的是概念验证，没有生产准备好的解决方案。）

---

我对更优雅的解决方案持开放态度。

您能否编辑JSFIDLE以展示如何使用

getBoundingClientRect

？我不认为比例更容易，你将如何计算比例因子？谢谢詹姆斯。但是，我不知道getBoundingClientRect或缩放变换如何解决我的问题。您希望在旋转之前还是之后应用缩放？在旋转之后。请看fiddle示例。缩放转换不会像预期的那样工作，因为它会缩放元素内容，这不是我想要的。

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