旋转后调整div宽度和高度

发布于 2024-09-10 08:52:45 字数 225 浏览 2 评论 0原文

如果我有这些规则：

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

然后一个事件将变换更改为：

-moz-transform: rotate(90deg)

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

谢谢，

乔

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

姜生凉生 2024-09-17 08:52:45

似乎变换是在其他所有操作之后应用的，因此宽度和高度不会更新。我能想到的最好的解决方案是使用旋转矩阵自己计算旋转尺寸：

[ 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;

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;

回复收藏 0 原文

咽泪装欢 2024-09-17 08:52:45

这是我实现的最优雅的 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);

Here's the most elegant JavaScript solution, that I have achieved.

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

回复收藏 0 原文

~没有更多了~