There is a rectangle located on the page at specific x,y coordinate and a width and height obtained via getBoundingClientRect. After his turn at a certain degree all data obtained again using getBoundingClientRect are other (coordinates and size). I understand that the program of school geometry (probably projection), but wedge caught not for children. Help. How can I get the correct data, which was before the rotation?

asked March 23rd 20 at 19:25

2 answers

answered on

Solution

yet all that managed to bungle it -

h = (height_t * Math.cos(radian) - width_t * Math.sin(radian))/( Math.pow(Math.cos(radian),2) - Math.pow(Math.sin(radian),2));

w = (width_t * Math.cos(radian) - height_t * Math.sin(radian))/(Math.pow(Math.cos(radian),2) - Math.pow(Math.sin(radian),2));

width_t and where height_t is the size of the enclosing square

radian in radians converted from degrees.

But there is a feature of these formulas is "dressing down" the size if the degree beyond 0-90 (put the code which does not exit), but at some point the width is changed from high places. I think now the original rectangle proportion, which is easier than the original dimensions (they transformirovalsya by the user).

Either spit on it all and make a clone, only without the twist. The truth will come another problem - instead of a square then there will be pictures that can be huge.

p.s. Decided to make a clone, only in the form of a painted rect (fill = none) with all characteristics like the pictures, only without the twist. Works perfectly. The formula (which is higher) of course working, but I get lost in them, as it is only a small part of the whole mechanism with these "rectangles")

h = (height_t * Math.cos(radian) - width_t * Math.sin(radian))/( Math.pow(Math.cos(radian),2) - Math.pow(Math.sin(radian),2));

w = (width_t * Math.cos(radian) - height_t * Math.sin(radian))/(Math.pow(Math.cos(radian),2) - Math.pow(Math.sin(radian),2));

width_t and where height_t is the size of the enclosing square

radian in radians converted from degrees.

But there is a feature of these formulas is "dressing down" the size if the degree beyond 0-90 (put the code which does not exit), but at some point the width is changed from high places. I think now the original rectangle proportion, which is easier than the original dimensions (they transformirovalsya by the user).

Either spit on it all and make a clone, only without the twist. The truth will come another problem - instead of a square then there will be pictures that can be huge.

p.s. Decided to make a clone, only in the form of a painted rect (fill = none) with all characteristics like the pictures, only without the twist. Works perfectly. The formula (which is higher) of course working, but I get lost in them, as it is only a small part of the whole mechanism with these "rectangles")

Try https://developer.mozilla.org/en-US/docs/Web/API/S... - Aaron_Kessl commented on March 23rd 20 at 19:30

answered on March 23rd 20 at 19:29

If you only have a bounding rectangle and its position - you do not compute - there are an infinite number of squares which give a bounding rect. (try to draw a couple and understand what one is yours).

the simplest example of a square can be rotated to 0 degrees and your blue is what you need. And may be rotated and then it is not what you need ;)

you need some kind of infa

the simplest example of a square can be rotated to 0 degrees and your blue is what you need. And may be rotated and then it is not what you need ;)

you need some kind of infa

Find more questions by tags JavaScriptCSS