javascript - SVG 路径上的布尔运算

Question

截至 2014 年初，SVG 规范没有对布尔运算的任何内置支持

布尔运算是用于改变大部分重叠路径的固有几何形状的方法。它们允许通过对更简单的形状执行操作来构造复杂的形状，并且在某种程度上类似于Constructive Solid Geometry (CSG)。

然而，这个问题是指 2D 矢量路径。流行的路径运算有：并集、减法、交集、异或（异或）。

是否有任何图书馆可以帮助我解决这个问题？

Answer 1

有Javascript Clipper，它允许路径上的所有布尔运算集，但条件是输入路径是多边形。

• 如果我们有任何曲线（三次/二次贝塞尔曲线），可以使用De Casteljau 算法轻松地将它们细分为多边形。

  • 如果细分样本足够高，则结果将是一个在视觉上看起来像曲线的多边形（以大量数据为代价，因为顶点数量线性增加，具体取决于细分的保真度）。

然后我们可以在JavaScript Clipper中为布尔运算提供路径。

---

这里需要注意的是，如果路径包含曲线，我们就会失去路径固有的“弯曲”特性。做上面提到的“多边形化”，或多或少是一条单行道。