Is it possible to detect Intersections and overlaps?

[sunnypatel165]

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

1. When save() happens, is there a way to detect the two areas separately or will it be just one object?
2. Imagine a User B is presented with the same shapes and clicks on/inside one of them (say just a dot/point is being drawn). 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?

[seveibar]

1. You can create multiple regions. Only one can be selected.
2. There are algorithms for determine polygon overlap. (SO) (npm) We've implemented some overlap algorithms for non-polygons in this library, but I don't think they're exposed.

You can probably build what you're talking trying to build, but it's not completely aligned with what this library is typically used for, so your UX may be not-as-good as it could be with a purpose-built library.

Hopefully that is helpful :)

[sunnypatel165]

@seveibar Thanks! That's super helpful.

Just a followup though: As much as I understand the demos, the library allows a user to draw polygons on the image and also highlights them. Why do you think that the UX might not be as good? Just trying to get some ideas here.

[seveibar]

Captcha is very simple. Some parts of this library (such as the sidebar) add complexity to the user interface. If you're building something that is small like a Captcha box, or has a user interact in a sort of "read-only" fashion, you might find it's not totally ergonomic. If you're able to create the capability you're looking for on the demo site and you're satisfied with the aesthetic and user interaction, then you can safely ignore what I've said :)

[sunnypatel165]

Oh alright, no I think that User A (who marks "correct" regions) will definitely want/like the UI similar to the demo. Thanks for your inputs!

[sunnypatel165]

Sorry for reopening, I am a little lost here. How do I save polygons/points mapped by the user? I passed in an onExit = {props => {...}} but the props only had lastAction that seemed to contain geometry.

How do I get all polygons/points the user might have drawn before hitting save?

[seveibar]

look inside the images array, if you're still stuck, post the json output after drawing a polygon and I'll help find it :)

[sunnypatel165]

Thanks I was able to implement the whole workflow. The only thing that I can't get to work is an ImageCanvas. I used ImageCanvas with imageSrc and regions and I weirdly get Missing required props "images" or "videoSrc" which does not even belong to the Canvas component. Am I missing something? (I want to use ImageCanvas for a screen where I just want to display a summary of old annotations and not edit them).

[sunnypatel165]

And what's even more weird is that adding properties of imageSrc and regions like you would in an Annotator, renders the Annotator instead of ImageCanvas 😩

[sunnypatel165]

Nvm. Import statement needs to be import ImageCanvas from "react-image-annotate/ImageCanvas"

I was wondering if you want me to add some more details to the README :)