追踪SVG路径

Question

我目前正在开发一款应用程序，将教用户如何书写外文字符（字符跟踪/字母跟踪），例如汉字、韩文字母、阿拉伯文字等。我通过Adobe Illustrator制作了这些字符，并将其作为XML文件导入到Android中。 SVG将作为指南来跟踪其笔画并检测用户手势，用户应该按照笔画进行跟踪，一旦正确完成，它就应该被填充，否则应该显示用户应该先跟踪的笔画。

请参见下面的示例图像： 下面的红线是我的手势，而绿线显示了在进入其他笔画之前跟踪字符的正确方式。

这种项目有没有人已经有过经验？是否可以使用本机Android手势检测来完成？谢谢。

免责声明：以下屏幕截图来自Chase Colburn开发的应用程序Japanese Kanji Study

- vidalbenjoe

---

将SVG（矢量）作为字符形状的来源可能是可以的，但用户的绘图很可能需要使用“画布”（HTML5的画布元素），因为您想让他们执行每像素绘制。然后，您需要检查绘制线是否在原始边界内等。所以我认为这是可能的，但不确定最佳方式是什么。问题是 - 为什么你需要“手势”？似乎你只需要一个触摸点进行标准的“拖动”操作？ - Sergey Rudenko

非常感谢您的想法，先生，但我真的不知道是否可能通过手势检测用户当前正在跟踪什么。无论如何，谢谢您，先生。 - vidalbenjoe

Answer 1

如果我是你，我可能不会使用SVG <path>元素。我会使用一系列（数组）点的方式（即相当于SVG<polyline>）。这些点应该足够接近，以便在绘制时看起来像是平滑的线条。或者在渲染它们时可以应用一些平滑处理。

点数组的优点在于，比起在任意<path>上寻找最近的点，它更容易找到靠近触摸位置的最近点。而当你用手指“追踪”时，你只需要通过所有点画一条直线，直到最靠近你的触摸位置的那个点。

显然，对于大多数字符，您实际上会有两个或更多的点数组。但是您只需按顺序处理每个数组即可。

- Paul LeBeau

Answer 2

实际上，只需查看html并获取一些想法即可。在html中，您可以在图像映射内提供坐标区域并使其可点击。此链接link详细说明了我想说的内容。

因此，在提供区域之后，您可以按顺序进行排序，例如1区域2区域... n区域。之后，您需要使第一个区域可点击，只需给出一个标志，如果该标志为true，则在触摸时更改背景颜色。当第一个区域被触摸时，您将使以下区域标志为true。这完全取决于您。其中一种解决方案。但主要问题在于XML中可以创建带有坐标的MappedImage

- Daniyar Kayirbolatov