旋转后调整div的宽度和高度 [英] Adjusting div width and height after rotated

问题描述

如果我有这些规则:

<上一页>宽度:50px；高度:100px；-moz 变换:旋转(0 度)

然后一个事件将转换更改为:

<上一页>-moz 变换:旋转(90 度)

从逻辑上讲，这不应该自动交换宽度和高度吗?我需要旋转来切换宽度和高度以进行准确的位置检测.

谢谢，

乔

解决方案

似乎转换是在其他所有内容之后应用的，所以宽度和高度没有更新.我能想到的最佳解决方案是使用旋转矩阵自己计算旋转尺寸:

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

将其转换为 JavaScript 很简单.您需要旋转所有四个角 (0,0) (w,0) (0,h) (w,h)，然后旋转的尺寸是旋转边界矩形的宽度和高度.

var angle = angle_in_degrees * Math.PI/180,sin = Math.sin(角度),cos = Math.cos(角度);//(0,0) 保持为 (0, 0)//(w,0) 旋转var x1 = cos * 宽度，y1 = sin * 宽度；//(0,h) 旋转var x2 = -sin * 高度，y2 = cos * 高度；//(w,h) 旋转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,旋转高度 = 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;

这篇关于旋转后调整div的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！