Регулировка ширины и высоты div после поворота - PullRequest
Новая
       16

Регулировка ширины и высоты div после поворота

8 голосов
/ 18 июля 2010

Если у меня есть эти правила: 

width:50px;
height:100px;
-moz-transform: rotate(0deg)

, а затем событие меняет преобразование на: 

-moz-transform: rotate(90deg)

логически, разве это не должно автоматически менять ширину и высоту?Мне нужно вращение, чтобы переключать ширину и высоту для точного определения положения.

Спасибо,

Джо

Ответы [ 2 ]

22 голосов
/ 18 июля 2010

Кажется, что преобразование применяется после всего остального, поэтому ширина и высота не обновляются. Лучшее решение, которое я могу придумать, - это рассчитать повернутые размеры самостоятельно, используя матрицу вращения: 

[ cos X     -sin X ] [ width  ]
[ sin X      cos X ] [ height ]

Это просто, чтобы перевести это на JavaScript. Вам нужно повернуть все четыре угла (0,0) (w, 0) (0, h) (w, h), а затем повернутые размеры - это ширина и высота повернутого ограничивающего прямоугольника. 

var angle = angle_in_degrees * Math.PI / 180,
    sin   = Math.sin(angle),
    cos   = Math.cos(angle);

// (0,0) stays as (0, 0)

// (w,0) rotation
var x1 = cos * width,
    y1 = sin * width;

// (0,h) rotation
var x2 = -sin * height,
    y2 = cos * height;

// (w,h) rotation
var x3 = cos * width - sin * height,
    y3 = sin * width + cos * height;

var minX = Math.min(0, x1, x2, x3),
    maxX = Math.max(0, x1, x2, x3),
    minY = Math.min(0, y1, y2, y3),
    maxY = Math.max(0, y1, y2, y3);

var rotatedWidth  = maxX - minX,
    rotatedHeight = maxY - minY;
1 голос
/ 07 июля 2016

Вот самое элегантное решение JavaScript, которого я достиг. 

// suppose, we know width, height and rotation angle (deg)
var width, height, angle;

var rad = angle * Math.PI / 180,
    sin = Math.sin(rad),
    cos = Math.cos(rad);

var newWidth  = Math.abs(width * cos) + Math.abs(height * sin),
    newHeight = Math.abs(width * sin) + Math.abs(height * cos);
...