如何获得中风的轮廓？

Question

我想将描边路径转换为填充对象.(以编程方式,在JavaScript中.)

这条线只是一条简单的曲线,一系列坐标.我可以将这条线渲染成一条路径,然后给它一个特定厚度的笔划......但我试图得到一个填充的形状而不是一条描边线,这样我就可以对它进行进一步的修改,比如翘曲它,所以产生的"笔划"可能会有不同的厚度或者有自定义位被切掉(据我所知,这些东西都不可能用真正的SVG笔划).

所以我试图手动将一条线"加厚"成一个坚固的形状.我找不到任何这样做的功能 - 我查看了D3.js和Raphaël的文档,但没有运气.有谁知道这样做的库/函数？

或者,甚至更好:如果有人能够向我解释关于我将如何手动执行此任务的几何理论,通过获取我所拥有的线坐标列表并制定出有效"抚摸"它的新路径,这将是惊人的.换句话说,当你告诉它描述一条路径时,浏览器会做什么- 它如何确定描边应该是什么形状？

Answer 1

最近有一个类似的问题：\n svg:generate 'outline path'

\n\n

总而言之，这是一项不平凡的任务。正如我对链接问题的回答中提到的，PostScript 有一个用于生成路径的命令，该命令生成与笔划基本相同的输出，称为strokepath。如果您在运行我在链接问题中发布的代码时查看 Ghostscript 吐出的内容，就会发现它非常难看。甚至 Inkscape 也做得不好。我刚刚在 Inkscape 中尝试了“路径 => 轮廓描边”（我认为这就是英文字幕应该说的），结果看起来与描边路径并不相同。

\n\n

“最简单”的情况是，如果您只有非自相交的折线、多边形或不包含曲线的路径，因为一般来说，您无法将精确的“平行”B\xc3\xa9zier 曲线绘制到一条非平凡的 B\xc3\xa9zier 曲线的右侧和左侧将界定描边区域 - 它在数学上是不存在的。所以你必须以一种或另一种方式来近似它。对于直线段，可以相对容易地找到精确解。

\n\n

渲染带有曲线/圆弧的矢量路径的经典方法是用足够平滑的折线来近似所有内容。De Casteljau 算法通常用于将 B\xc3\xa9zier 曲线转换为线段。（这基本上也是您strokepath在 Ghostscript 中使用该命令时出现的结果。）然后您可以找到分隔平行线段，但必须使用适当的 linejoin 和 miterlimit 规则正确连接它们。当然，不要忘记线帽。

\n\n

我认为自相交路径可能很棘手，因为路径内可能会出现空心区域，即黑色路径的“交叉区域”可能会变成白色。使用非零缠绕规则时，这可能不是开放路径的问题，但我对此持谨慎态度。对于闭合路径，您可能需要两条“分隔”路径以相反的方向运行。但我现在不确定这是否真的涵盖了所有潜在的陷阱。

\n\n

抱歉，如果我对此造成很多困惑，并且可能没有太大帮助。

\n