获取变换后旋转对象的宽度和高度

This question is a followup to the question: width/height after transform.

这个问题是问题的后续问题:变换后的宽度/高度。

I am posting a new question because that question only solves the width and not the height. The formula:

我发布了一个新问题,因为该问题只解决宽度而不是高度。公式:

var x = $('#box').width()*Math.cos(rotationAngle) 
      + $('#box').height()*Math.sin(rotationAngle);

works well for the width, what is the equivalent formula to calculate the height?

适用于宽度,计算高度的等效公式是什么?

Thanks.

3 个解决方案

#1

This is the best working formula I have come up with:

这是我提出的最佳工作方式:

var h = $(obj).height() * Math.abs(Math.cos(deg)) + $(obj).width() * Math.abs(Math.sin(deg));
var w = $(obj).width() * Math.abs(Math.cos(deg)) + $(obj).height() * Math.abs(Math.sin(deg));

#2

Well, your previous question involved a square. Squares have the same dimensions all the way around. So, unless there's something funky going on, your height should be exactly the same as your width.

那么,你之前的问题涉及一个正方形。正方形具有相同的尺寸。所以,除非有一些时髦的东西,你的身高应该与你的宽度完全相同。

#3

The below code will work out the bounding box for a rotated object in JavaScript.

下面的代码将计算出JavaScript中旋转对象的边界框。

var obj = document.getElementById("obj"); // Get object
var bx = obj.clientWidth; // Width of rectangle
var by = obj.clientHeight; // Height of rectangle
var t = /[0-9]+/.exec(obj.style.transform)[0] * Math.PI / 180; // Convert to radians

var x = Math.sin(t) * by + Math.cos(t) * bx; // The bounding box width
var y = Math.sin(t) * bx + Math.cos(t) * by; // The bounding box height

document.write(x.toFixed(2), " ", y.toFixed(2)); // The width and height of finished bounding box of item rounded to 2 decimal places

<div id="obj" style="width: 200px; height: 200px; transform: rotate(30deg); background: red;"></div>

#1