c# - SVG - 获取两条路径的差异路径

Question

有没有一种简单的方法来获取两个 SVG 路径的差异路径？我有一个大的多边形，我需要从中切出一些孔，或者我必须通过减去路径将其切成碎片。

最好使用 JavaScript，但 C# 也可以。

我已经搜索过解决方案。最接近的是How can I cut one shape from another ，但它是关于形状，而不是路径。和 this answer仅给出了如何绘制带孔路径的线索，但无法自动执行此操作。

我真的坚持手动添加第二条路径(包括检查方向、绝对/相对位置、转换等所有内容)吗？

Answer 1

我不是很确定，你想要实现什么，但我可以看到两种可能性:A) 绘制一个带孔的多边形或 B) 在两个多边形之间进行 bool 差分运算。

A) 绘制带孔的多边形

缠绕顺序是关键。如果您有外部多边形(SVG 路径)，它是顺时针方向 (CW) 的，如下所示:

"M155,61.67 L155,212.7 L288.98,212.7 L288.98,61.67 L173.01999999999998,61.67 L155,61.67Z"

和一个逆时针 (CCW) 的孔多边形(SVG 路径)，如下所示:“M274.37,190.77 L171.24,190.77 L171.24,81.16 L274.37,81.16 L274.37,81.16 L274.37,190.77Z”

然后将它们组合到同一路径中:

"M155,61.67 L155,212.7 L288.98,212.7 L288.98,61.67 L173.01999999999998,61.67 L155,61.67ZM274.37,190.77 L171.24,190.77 L171.2 4,81.16 L274.37,81.16 L274.37,81.16 L274.37,190.77Z"

你得到以下带孔的多边形:

在上图中，似乎从外部多边形中减去了内部多边形。

B) 在两个多边形之间进行 bool 差分运算

如果您想从一个多边形中切割出另一个多边形，并希望通过在两个或多个多边形之间进行 bool 差分运算来创建新的几何图形，您可以使用JAVASCRIPT CLIPPER。 , 其中有 AN ONLINE DEMO ，您可以在其中玩不同的 bool 运算。您还可以通过单击多边形 - 自定义来输入您自己的多边形。您可以使用 SVG 路径语法输入它们(仅允许 MoveTo:s 和 LineTo:s)。还有一个多边形资源管理器，您可以在其中查看操作结果。也可以将输出视为 SVG 路径。还有A WIKI PAGE ，其中包含代码示例。

主题(“多边形”)和剪辑(“剪辑”)多边形的示例:

Subject 和 Clip 多边形之间的 bool 差异: