如何在Javascript上测量旋转元素的宽度和高度？

Question

我的设计界面存在一个错误，即旋转时所选div的宽度和高度为false。

这里是我所拥有的模式和我想要的另一种模式。

我想找到使用Javascript的公式，我怎么可能写它？

PS：我已经拥有第一个架构的角度，宽度和高度，无需再次计算。

Answer 1

Width和height不会更改，当rotate元素。同样相同时，请参阅代码段。通过dom使用value

1. offsetWidth
2. offsetHeight

var rot =document.getElementById("rot");
console.log(rot.offsetWidth,rot.offsetHeight)

#rot{
width:100px;
height:40px;
background-color:pink;
transform:rotate(30deg)
}

<div id="rot"></div>

Answer 2

如果是你需要的方程式，那么就去吧。

w-y*sin(theta) = x*cos(theta)
h-y*cos(theta) = x*sin(theta)

其中，

w = given width
h = given height
x = width you need
y = height you need
theta = angle

一点点三角测量法有很长的路要走。

解决这个联立方程给了我 -

2x = (w+h)/(cos(theta)+sin(theta)) + (w-h)/(cos(theta)-sin(theta))
2y = (w+h)/(cos(theta)+sin(theta)) - (w-h)/(cos(theta)-sin(theta))

随意转换为数学函数。