How to calculate the sides of the rectangle before rotation?
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