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

Fill image or vector path with Buttons in HTML and js

本文关键字：图像 路径 填充 按钮 HTML js      更新时间：2023-09-26

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

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

小提琴

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

另一个方面是用户体验(每个子路径的长度，是否容易跟踪或需要更长一点以更方便用户使用，…)

我的建议是提供预分割路径，使用一些工具(Inkscape, Adobe Illustrator，…)将字母分割成你认为方便的子路径。

  • 这里有一个关于如何在Inkscape中做到这一点的问题)
  • 在Adobe Illustrator http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-6246a.html#WS49B38026-E630-4b8e-8ABF-2AA6C629AE59a

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

编辑:

我在做实验，我设法用圆圈填充路径，这样你就可以跟踪路径，而不会分裂。下面是一个示例，您可以以此为基础找到最终解决方案。

相关文章：