Как я могу измерить ширину и высоту повернутого элемента в Javascript?

Question

1

В моем интерфейсе дизайна есть ошибка, когда ширина и высота моего выбранного div ложны при повороте.

Вот схема того, что у меня есть, и еще одна из того, что я хочу.

Я хочу найти формулу с помощью Javascript, как я могу ее написать?

PS: У меня уже есть угол, ширина и высота первой схемы, нет необходимости вычислять ее снова.

Nuri Katsuki 02 июнь 2017, в 08:22

Теги:

math

2 ответа

1

Если это уравнения, которые вам нужны, то здесь вы идете.

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))

Не стесняйтесь преобразовывать в математические функции.

user1741851 02 июнь 2017, в 03:46

prasanth · Accepted Answer · 2017-06-02T04-20-00.000Z

Width и height не изменяются при rotate элемента. Аналогично, см. Фрагмент.get value через dom use с

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>