用 HTML 和 js 中的按钮填充图像或矢量路径

Question

我的目标是为移动平台制作一个基于non-latin 的信件追踪应用程序。我已经将一些字符转换为 SVG 文件并且只有一个路径，但是找不到一种简单的方法来用连续的按钮填充路径以引导用户完成绘图。所以，我的想法是创建按钮并监听ondown 并强制用户跟随路径上的按钮。

或者，我可以将路径分成许多小路径，并听取每一条路径。我的问题是我不知道如何将 SVG 路径分解为许多小路径。如果我可以将字符路径分解为许多小的连续路径，则类似此代码的代码将起作用。

Fiddle

Answer 1

在我看来，子路径是最好的解决方案，但是在代码中将路径分解为子路径是有问题的，因为很难拆分 Bezier curves。这需要扎实的数学背景并涉及大量计算。

另一个方面是用户体验（每个子路径的长度，是否易于追踪或需要更长一点以更用户友好，...）

我的建议是提供预分割路径，使用一些工具（Inkscape，Adobe Illustrator，...）将字母分割成您认为方便的子路径。

• 这里是 question，关于如何在 Inkscape 中执行此操作）
• 在 Adob​​e Illustrator 中 http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-6246a.html#WS49B38026-E630-4b8e-8ABF-2AA6C629AE59a

现在您可以使用您提供的 Fiddle 来监听子路径上的 mouseover 事件。

编辑：

我正在试验，我设法用圆圈填充路径，这样你就可以追踪路径，而不会分裂。这是example，您可以在此基础上找到最终解决方案。