0

I have two images, one is a static image and another is dynamic which can be rotated and transform. I want to know if the dynamic image has covered the static image or not. I was able to know if the dynamic image covered the static image or not by using this code.

const cardBox = document.getElementById("cardBg");
const cardPosition = cardBox.getBoundingClientRect();
const imgBox = document.getElementById("img");
const imagePosition = imgBox.getBoundingClientRect();
const isInside =
    imagePosition.top <= cardPosition.top &&
    cardPosition.top <= imagePosition.bottom &&
    imagePosition.top <= cardPosition.bottom &&
    cardPosition.bottom <= imagePosition.bottom &&
    imagePosition.left <= cardPosition.left &&
    cardPosition.left <= imagePosition.right &&
    imagePosition.left <= cardPosition.right &&
    cardPosition.right <= imagePosition.right;

But when I rotate the dynamic image this logic does not work. Any solution for this ?

Kais
  • 1,925
  • 3
  • 23
  • 35
  • 1
    Maybe this post helps: https://stackoverflow.com/questions/29915144/how-to-detect-overlapping-rotated-dom-elements-given-mouse-coordinate – Lars Flieger Mar 22 '21 at 10:18
  • [This css-tricks post](https://css-tricks.com/get-value-of-css-rotation-through-javascript/) says you can get the rotation angle with a relatively simple bit of trigonometry: `const angle = Math.round( Math.atan2(b, a) * (180/Math.PI) );` -- but then you still need to calculate the edges of the rotated element and check what's within them. So... [this answer](https://stackoverflow.com/a/11319282/8223070) may be better news, indicating you might not need anything more than [`.getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). – Cat Mar 22 '21 at 10:54

0 Answers0