[英]How can I measure the width and height of a rotated element on Javascript?
There is a bug with my design interface where the width and height of my selected div are false when rotated. 我的设计界面中有一个错误,即旋转时所选div的宽度和高度为false。
Here's a schema of what I have and another one of what I want. 这是我所拥有的架构,也是我所要的另一个架构。
I want to find the formula using Javascript, how can I possibly write it ? 我想使用Javascript查找公式,怎么写呢?
PS : I already have the angle, the width and the height of the first schema, no need to calculate it again. PS:我已经有了第一个方案的角度,宽度和高度,无需再次计算。
Width
and height
are not changing, when rotate
the element .its also the same see the snippet .get the value
via dom use with Width
和height
没有变化,当rotate
的元素。其也同样看到的片段。获得的value
通过与DOM使用
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>
If it is equations you need, Then here you go. 如果需要方程式,则开始。
w-y*sin(theta) = x*cos(theta)
h-y*cos(theta) = x*sin(theta)
Where, 哪里,
w = given width
h = given height
x = width you need
y = height you need
theta = angle
A little trigonometry goes a long way. 一点三角学可以走很长一段路。
Solving this simultaneous equation gives me - 解决这个联立方程给我-
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))
Feel free to convert to Math functions. 随时转换为数学函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.