svg - 如何获得笔划的轮廓？

Question

这个问题在这里已经有了答案:





svg: generate 'outline path'

(3 个回答)


3年前关闭。




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

这条线只是一条简单的曲线，一个坐标序列。我可以将这条线渲染为一条路径，并给它一个一定粗细的笔触......但我试图获得一个填充的形状而不是一条描边线，以便我可以对其进行进一步的修改，例如翘曲它，因此生成的“笔画”的粗细可能会有所不同，或者从中切出自定义位(据我所知，真正的 SVG 笔画都不可能实现这些功能)。

所以我试图手动将一条线“加粗”成实心形状。我找不到任何执行此操作的函数 - 我已经查看了 D3.js 的文档和 Raphaël ，但没有运气。有谁知道可以做到这一点的库/函数？

或者，甚至更好:如果有人可以向我解释有关我将如何手动完成这项任务的几何理论，通过获取我拥有的线坐标列表并制定一条有效地“描边”它的新路径，那将是惊人的。换句话说，当你告诉浏览器描边路径时浏览器会做什么——它如何计算出描边应该是什么形状？

Answer 1

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

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

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

渲染带有曲线/圆弧的矢量路径的经典方法是使用足够平滑的折线来近似所有内容。 De Casteljau's Algorithm通常用于将贝塞尔曲线转换为线段。 (这也是您在 Ghostscript 中使用 strokepath 命令时所得到的结果。)然后您可以找到分隔平行线段，但必须使用适当的 linejoin 和 miterlimit 规则正确连接它们。当然，不要忘记线帽。

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

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