問(wèn)題描述

如果我有這些規(guī)則:

然后一個(gè)事件將轉(zhuǎn)換更改為:

從邏輯上講，這不應(yīng)該自動(dòng)交換寬度和高度嗎?我需要旋轉(zhuǎn)來(lái)切換寬度和高度以進(jìn)行準(zhǔn)確的位置檢測(cè).

謝謝，

喬

似乎轉(zhuǎn)換是在其他所有內(nèi)容之后應(yīng)用的，所以寬度和高度沒(méi)有更新.我能想到的最佳解決方案是使用旋轉(zhuǎn)矩陣自己計(jì)算旋轉(zhuǎn)尺寸:

[ cos X -sin X ] [ width ][ 罪 X cos X ] [ 高度 ]

將其轉(zhuǎn)換為 JavaScript 很簡(jiǎn)單.您需要旋轉(zhuǎn)所有四個(gè)角 (0,0) (w,0) (0,h) (w,h)，然后旋轉(zhuǎn)的尺寸是旋轉(zhuǎn)邊界矩形的寬度和高度.

var angle = angle_in_degrees * Math.PI/180,sin = Math.sin(角度),cos = Math.cos(角度);//(0,0) 保持為 (0, 0)//(w,0) 旋轉(zhuǎn)var x1 = cos * 寬度，y1 = sin * 寬度；//(0,h) 旋轉(zhuǎn)var x2 = -sin * 高度，y2 = cos * 高度；//(w,h) 旋轉(zhuǎn)var x3 = cos * 寬度 - sin * 高度，y3 = sin * 寬度 + cos * 高度；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 rotateWidth = maxX - minX,旋轉(zhuǎn)高度 = maxY - minY;

If I have these rules:

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

and then an event changes the transform to:

-moz-transform: rotate(90deg)

logically, shouldn't that automatically exchange the width and the height? I need the rotate to switch width and height for accurate position detection.

Thanks,

Joe

It seems like the transform is applied after everything else, so the width and height aren't updated. The best solution I can think of is to calculate the rotated dimensions yourself, using the rotation matrix:

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

It's straightforward to translate this into JavaScript. You need to rotate all four corners (0,0) (w,0) (0,h) (w,h) and then the rotated dimensions are the width and height of the rotated bounding rectangle.

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;

這篇關(guān)于旋轉(zhuǎn)后調(diào)整div的寬度和高度的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！