react-canvas-draw
react-canvas-draw copied to clipboard
Is it possible to detect Intersections and overlaps?
Imagine User A has drawn something - say 2 random polygons. I have 2 questions:
- When I call saveData(), is there a way to detect the two objects separately or will it be just one shape?
- 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?
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!