0

As I can get position of element from left side of screen using e.getBoundingClientRect().left

When we want to get the position of end points then add width or height according to need but how to get the position of end points when element is rotated.

Is it possible to get values

enter image description here

let getBoxPos = document.querySelectorAll(".demo")
let box1 = document.querySelector("#box1")
let box2 = document.querySelector("#box2")
let box3 = document.querySelector("#box3")
let s = "";


function func() {
  getBoxPos.forEach(e => {
    let figXValue = e.getBoundingClientRect().left;
    s = Number(s) + Number(1);
    console.log("Start distance for box" + s + ":" + figXValue)
  })
  console.log("End distance for box1:" + (box1.getBoundingClientRect().left + 24));
  console.log("End distance for box3:" + (box3.getBoundingClientRect().left + 104));
  console.log("Don't know the correct way for box2:Is it box2.getBoundingClientRect().left + 100 or box2.getBoundingClientRect().left + 20 or none of them ");
}
func();
.demo {
  height: 100px;
  width: 20px;
  margin-left: 40px;
  border: 2px solid black;
}

.demo:nth-child(2) {
  border: 2px solid red;
  transform: rotate(-45deg);
}

.demo:nth-child(3) {
  border: 2px solid green;
  transform: rotate(-90deg);
}
<div class="demo" id="box1"></div>
<div class="demo" id="box2"></div>
<div class="demo" id="box3"></div>
Braiam
  • 1
  • 11
  • 47
  • 78
Rana
  • 2,500
  • 2
  • 7
  • 28
  • 1
    This might help https://stackoverflow.com/a/51463527/17175441 – aerial Nov 14 '21 at 14:07
  • Do yu know if it has been rotated about the central point or might it be elsewhere? – A Haworth Nov 14 '21 at 18:54
  • @AHaworth I used the `transform-origin: top center;` so it is from the center top part but the values remains same. If you can provide any different or better solution I will be really thankful – Rana Nov 14 '21 at 18:57

1 Answers1

0

What we know: Height, width of element and the angle θ because elements has animation or element is transformed(rotated)

What we don't know or need to find: New width and height of element after rotation

If we know a angle & a side(height, width in this case) of right angle triangle than we can find other sides too.

To solve a triangle with one side, you also need one of the non-right angled angles. If not, it is impossible:

  1. If you have the hypotenuse, multiply it by sin(θ) to get the length of the side opposite to the angle.
  2. Alternatively, multiply the hypotenuse by cos(θ) to get the side adjacent to the angle.
  3. If you have the non-hypotenuse side adjacent to the angle, divide it by cos(θ) to get the length of the hypotenuse.
  4. Alternatively, multiply this length by tan(θ) to get the length of the side opposite to the angle.
  5. If you have an angle and the side opposite to it, you can divide the side length by sin(θ) to get the hypotenuse.
  6. Alternatively, divide the length by tan(θ) to get the length of the side adjacent to the angle.

Taken from OMNI Calculator

enter image description here

Only single angle is given but other are found using angle formulas and relations.

Now as the question asks: How to get position of blue point than we have to add this to left value

Height*Sinθ + Width*Cosθ

The final code becomes:

box2.getBoundingClientRect().left + Height*Sinθ + Width*Cosθ

You must include border too if any in height and width, if wanted from border edge

As A Haworth pointed out rotation can be from any point, so checked the compatibility for different positions and it seems compatible with rotation from any point so far. enter image description here enter image description here >>The element is rotated at an angle from anywhere.

This answer may help further

Rana
  • 2,500
  • 2
  • 7
  • 28