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

Question

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

或者，我可以将路径分解为许多小路径，并侦听每个路径。我的问题是，我不知道如何将SVG路径分解为许多小路径。如果我可以将字符路径分解成许多小的连续路径，那么类似于此代码的代码就可以工作。

Fiddle

Answer 1

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

另一个方面是用户体验(每个子路径的长度，是否易于跟踪，或者需要更长一点以使用户更友好，...)

我的建议是提供预先拆分的路径，使用一些工具(Inkscape、Adobe Illustrator等)将字母拆分为您认为方便的子路径。

Adobe Illustrator http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-6246a.html#WS49B38026-E630-4b8e-8ABF-2AA6C629AE59a中的

• question是关于如何在Inkscape中执行此操作的

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

编辑：

我在做实验，我设法用圆圈填满了路径，这样你就可以跟踪路径，而不会分裂。这是一个example，你可以在它的基础上找到最终的解决方案。