embiem / react-canvas-draw

React Component for drawing in canvas
https://embiem.github.io/react-canvas-draw/
MIT License
892 stars 315 forks source link

Is it possible to detect Intersections and overlaps? #75

Open sunnypatel165 opened 4 years ago

sunnypatel165 commented 4 years ago

Imagine User A has drawn something - say 2 random polygons. I have 2 questions:

  1. When I call saveData(), is there a way to detect the two objects separately or will it be just one shape?
  2. Imagine a User B is presented with the same shapes and clicks inside one of them (say just a dot/point being drawn with the same brush). What would be the best way to detect if User B's shape "lies inside" or "overlaps" or "intersects" the User A's shapes?

My use case is something like a Recaptcha but with 1 background image. As User A you can designate certain areas on the image as "correct answers" and as User B you need to select an area and you will get a score for selecting the "correct" one. Does this fit the use case? Any other alternatives?

embiem commented 4 years ago

Hey @sunnypatel165, thanks for your question!

This is an interesting problem. To best solve it, I'd recommend working with the saveData directly. We save each drawn "line" and its "points". So if you mean with "polygon" basically just one object that has been drawn in one go (pointer down -> draw -> pointer up), then you can get each "polygon" as a "line" in the returned object of getSaveData().

In regards to detecting intersections/overlaps, I'd recommend looking up the "Separating Axis Theorem".

Hope I could help!