7

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.

Community
  • 1
  • 1
Light
  • 1,647
  • 3
  • 22
  • 39
  • Have a guess and you'll probably get it right. This is trivial (especially from the equation that you have), not to mention all over the Internet. – Dave Jun 09 '13 at 10:33
  • I have tried switching between the cos and the sin, however it didn't work... I will be happy to hear your answer :) – Light Jun 09 '13 at 10:46
  • Switching the cos and the sin *is* the answer, but I will say that the formula you've been given is missing the necessary Math.abs calls. As I said, it's all over the Internet. – Dave Jun 09 '13 at 10:50
  • see https://stackoverflow.com/a/30157405/133327 – abernier Jan 13 '19 at 09:47

4 Answers4

14

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));
Light
  • 1,647
  • 3
  • 22
  • 39
2

The below code will work out the bounding box for a rotated object in 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>
ChiMo
  • 581
  • 2
  • 13
  • 32
1

The solution from @ChiMo will not work if the angle value is negative. Fixed version:

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

var wrapper = document.getElementById("wrapper"); // Get object
wrapper.style.width = Math.round(x) + 'px';
wrapper.style.height = Math.round(y) + 'px';
#obj {
  width: 100px;
  height: 100px;
  background-color: red;
}

#wrapper {
  border: 1px solid black;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
<div id="wrapper">
  <div id="obj" style="transform: rotate(-30deg)"></div>
</div>
Александр Дубинин
  • 53
  • 1
  • 5
-1

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.

Psych0Mantis
  • 47
  • 3