Is it possible to detect Intersections and overlaps? about react-image-annotate HOT 9 OPEN

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 :)

from react-image-annotate.

@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.

from react-image-annotate.

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 :)

from react-image-annotate.

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!

from react-image-annotate.

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?

from react-image-annotate.

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

from react-image-annotate.

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).

from react-image-annotate.

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 😩

from react-image-annotate.

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 :)

from react-image-annotate.