在React Native中通过触摸来追踪形状的最简单方法？

Question

我正在尝试在我的本机应用程序上做一个确认屏幕，我需要用户跟踪一个椭圆形以确认他们的动作-就像今晚酒店使用其徽标一样。是否可以使用一个库来使用户跟踪svg？

以下是用户的操作示例：

Answer 1

[我发现有人尝试做this，我认为这不是最有创意的方法，很多年前就有一种方法可以立即完成。

我知道SVG正在用于艺术线条动画，那里有很多教程：

https://medium.com/@sterling.meghan/svg-line-animation-for-beginners-51857c88357f

此外，还有一个名为react-native-svg的SVG库，可以在javascript中拖动SVG对象

http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/

所以解决这个问题的主意是这样的：您有两层，一层又一层。

最上面的一个充满整个屏幕并有一个切口，即要追踪的形状（线条图）

要进入后面的SVG对象，您只能通过此切割来完成。您可以在起点处显示一个小圆圈，该圆圈是已切割的较大SVG彩色形状的一部分，该形状是第二层。

用户将开始跟踪，但是他真正在做的是将SVG大对象从一个点拖到另一个点，他需要遵循与跟踪一样的路径，因为只有这样，他才能将对象拖到孔中。 （他只能通过孔到达第二层中的对象）

被拖动的SVG对象的颜色与顶层的颜色不同，因此当用户拖动时，它会显示出填充路径的外观。

我希望这可以帮助您，或者至少给您一些想法。另外，当用户完成跟踪时，您可以使用CSS线条艺术动画为另一个SVG设置动画。有空的时候我可能会尝试一下。

Answer 2

我遇到了类似的情况，最终我使用了react-native-sketch-canvas

我让用户在画布上绘画，并将输出路径与预定义路径进行了比较。这不是一个完美的解决方案，但足以满足我的要求。