I am trying to create a sort include/exclude feature in a react native app, where a user can draw on an image to shade or unshade an area to include or exclude it, so that only items in the include(shade) area will be processed. I have gone through a few react native modules but i am having problems getting anything to work correctly. Overall it is very similar to a paint and erase function, but i need to know or be able to calculate the pixels that are shaded.
My latest approach is to use a SVG mask and path. The mask covers an image, and a user draws on it. A user could then click an erase button, and then start drawing another path that adds to the mask to hide the original path. The problem is that after the mask path is added a user can't draw on it, in case they want to make further alterations. I could simply alter the path d value but it wouldn't look quite right.
Does anyone know if you can somehow combine the SVG's, or remove intersecting parts from a path, or have any ideas of a better way to do this?
I am quite sure it can be done with the react-native-reanimated package.
See this as if I got u right its kinda what u are looking for.