React Native 中的 SVG 绘制和擦除

时间:2021-04-21 09:25:50

标签: javascript react-native svg image-processing react-native-svg

我正在尝试在 React Native 应用程序中创建排序包含/排除功能,用户可以在其中绘制图像以对区域进行着色或取消着色以包含或排除它,以便仅包含(阴影)中的项目区将被处理。我经历了一些 react native 模块,但我在让任何东西正常工作时遇到问题。总的来说,它与绘制和擦除功能非常相似,但我需要知道或能够计算被着色的像素。

我的最新方法是使用 SVG 蒙版和路径。遮罩覆盖图像,用户在其上绘图。然后,用户可以单击擦除按钮,然后开始绘制另一条路径,该路径添加到蒙版以隐藏原始路径。问题是在添加遮罩路径后,用户无法在其上绘制,以防他们想要进行进一步更改。我可以简单地改变路径 d 值,但它看起来不太正确。

有谁知道您是否可以以某种方式组合 SVG,或者从路径中删除相交部分,或者有任何更好的方法来做到这一点?

enter image description here

1 个答案:

答案 0 :(得分:0)

我很确定它可以通过 react-native-reanimated 包来完成。

看到 this 就好像我说对了,这正是你要找的东西。