0

I have an image which I can freely move, rotate and resize behind a fixed frame (fixed position and size). How can I find out with JavaScript/jQuery if the background from the bounding-box of the rotated image is inside the frame?

Many thanks in advance.

Kai
  • 1
  • 1
  • Interesting question! But: you actually want to check if the cropping area is within the bounding-box of the background. For me this is a huge difference. Feel free to edit your question. Tip: you can also inline images in your question (I'd suggest you to make it a bit smaller 300px - 500px width). – try-catch-finally Jan 20 '13 at 16:53
  • Have you tried searching? The [getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect) was new to me. The first test worked fine with latest Firefox, but maybe there are issues with other browsers. If this is not sufficient, math, to be more precisely [trigonometics](http://en.wikipedia.org/wiki/Trigonometry) is what you need. – try-catch-finally Jan 20 '13 at 17:28
  • Cant you just test if every corner of the frame is in the background? With trigonometric indeed. – RickyA Jan 21 '13 at 19:05

1 Answers1

0

Your background consists on 4 vertices. If you know them you can simply check if they're inside the frame.

If you don't have vertices but dimensions, position and rotation you can discover them using math and trigonometry.

This answere may help.

Community
  • 1
  • 1
n1xx1
  • 1,971
  • 20
  • 26