在本机反应中通过触摸跟踪形状的最简单方法？

Question

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

这是用户将执行的操作的示例：

Answer 1

我发现其他人试图这样做，我不认为这是最具创意的方法，很多年前就有一种方法可以在闪存中做到这一点。

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

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

所以我解决这个问题的想法是这样的：你有两层，一层一层。

最上面的一个充满了整个屏幕并有一个切口，这就是要描绘的形状（线条艺术）

要到达后面的 SVG 对象，您只能通过此剪切来完成。您可以在起点上显示一个小圆圈，该圆圈是剪切下方的大 SVG 彩色形状的一部分，该形状是第二层。

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

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

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