Compute bounding box X, Y, Height and Width of rotated element via JavaScript

Question

Basically I ask this question for JavaScript: Calculate the coordinates of a rotated rectangle

In this case:

• iX = Width of the rotating (blue) HTML element
• iY = Height of the rotating (blue) HTML element
• bx = Width of bounding box (red)
• by = Limit border height (red)
• x = X coordinates of the bounding box (red)
• y = Y coordinates of bounding box (red)
• iAngle / t = Angle of rotation of the HTML element (blue, not shown, but used in the code below), FYI: In this example, this is 37 degrees (not so important for the example)

How to calculate X, Y, Height and Width of a bounding box (all red numbers) surrounding a rotated HTML element (given its width, height and rotation angle) using JavaScript? The key to this will be to get a rotating HTML element (blue square) of the X / Y source code to use as an offset somehow (this is not presented in the code below). CSS3 transform-origin may be required to determine the center point.

I have a partial solution, but calculating X / Y codes does not work properly ...

var boundingBox = function (iX, iY, iAngle) { var x, y, bx, by, t; //# Allow for negetive iAngle that rotate counter clockwise while always ensuring iAngle < 360 t = ((iAngle < 0 ? 360 - iAngle : iAngle) % 360); //# Calculate the width (bx) and height (by) of the .boundingBox //# NOTE: See https://stackoverflow.com/questions/3231176/how-to-get-size-of-a-rotated-rectangle bx = (iX * Math.sin(iAngle) + iY * Math.cos(iAngle)); by = (iX * Math.cos(iAngle) + iY * Math.sin(iAngle)); //# This part is wrong, as it re-calculating the iX/iY of the rotated element (blue) //# we want the x/y of the bounding box (red) //# NOTE: See https://stackoverflow.com/questions/9971230/calculate-rotated-rectangle-size-from-known-bounding-box-coordinates x = (1 / (Math.pow(Math.cos(t), 2) - Math.pow(Math.sin(t), 2))) * (bx * Math.cos(t) - by * Math.sin(t)); y = (1 / (Math.pow(Math.cos(t), 2) - Math.pow(Math.sin(t), 2))) * (-bx * Math.sin(t) + by * Math.cos(t)); //# Return an object to the caller representing the x/y and width/height of the calculated .boundingBox return { x: parseInt(x), width: parseInt(bx), y: parseInt(y), height: parseInt(by) } }; 

I feel that I'm so close, and still still ...

Thanks so much for any help you can provide!

HELP TO NEAATRICS ...

After the HTML element is rotated, the browser returns a "matrix transformation" or "rotation matrix", which looks like this: rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0); See this for more information .

I have a feeling that this will enlighten us on how to get the X, Y bounding box (red) based solely on the width, height and angle of the rotated element (blue).

New information

Humm ... interesting ...

Each browser seems to handle rotation differently in terms of X / Y! FF completely ignores it, IE and Opera draw a bounding box (but its properties are not displayed, that is: bx and by), and Chrome and Safari rotate the box! All correctly report X / Y, except FF. So ... the X / Y problem seems to exist only for FF! How very strange!

It should also be noted that $(document).ready(function () {...}); fires too early for the rotated X / Y to be recognized (which was part of my original problem!). I rotate the elements just before the X / Y request requests in $(document).ready(function () {...}); but they don't seem to be updated until some time after (!?).

When I get a little more time, I will raise jFiddle with an example, but I use a modified form of "jquery-css-transform.js", so I have a tiny bit during training before jFiddle ...

So ... what, FireFox? This is not cool man!

Plot Thickens ...

Well, FF12 seems to fix the problem with FF11 and now acts like IE and Opera. But now I'm back to square with X / Y, but at least I think I know why now ...

It seems that even if X / Y is correctly reported by browsers for the rotated object, "Xhost" X / Y still exists in the version without rotation. This seems to be the order of operations:

• Starting from a non-rotating element on X, Y 20.20
• Rotate the specified item, resulting in a report X, Y will be equal to 15.35
• Move the specified element through JavaScript / CSS in X, Y 10.10
• The browser logically disconnects the element to 20.20, moves to 10.10, then rotates again, resulting in X, Y 5.25

So ... I want the element to appear at 10.10 after rotation, but due to the fact that the element (apparently) is an inverted post-move, the resulting X, Y is different from the set X, Y.

It is my problem! So I really need a function to take the desired coordinates of the place (10.10) and work back from there to get the starting coordinates X, Y, which will lead to the rotation of the element in 10.10. At least I know what my problem is now, thanks to the internal workings of browsers, it seems that this is a 10 = 5 rotating element!

Answer 1

I know this is a little late, but I wrote the fiddle specifically for this problem on HTML5 canvas:

http://jsfiddle.net/oscarpalacious/ZdQKg/

I hope someone finds this useful!

I actually don't calculate your x, y for the top left corner of the container. It is calculated as the result of the offset (code from the example violin):

 this.w = Math.sin(this.angulo) * rotador.h + Math.cos(this.angulo) * rotador.w; this.h = Math.sin(this.angulo) * rotador.w + Math.cos(this.angulo) * rotador.h; // The offset on a canvas for the upper left corner (x, y) is // given by the first two parameters for the rect() method: contexto.rect(-(this.w/2), -(this.h/2), this.w, this.h); 

Greetings

Answer 2

Have you tried using getBoundingClientRect () ?

This method returns an object with the current values ​​of "bottom, height, left, right, top, width" with rotation

Answer 3

Rotate the four corners into vectors from the center, rotate them and get a new minimum / maximum width / height from them.

EDIT:

Now I see where you have problems. You do the calculations using the entire side when you need to do them with offsets from the center of rotation. Yes, this leads to four rotated points (which, oddly enough, is exactly the same points as you started). Between them there will be one minimum X, one maximum X, one minimum Y and one maximum Y. These are your estimates.