SVG 路径上的布尔运算 [关闭]答案

【问题标题】：Boolean Operations on SVG paths [closed]SVG 路径上的布尔运算 [关闭]
【发布时间】：2013-02-23 01:16:07
【问题描述】：

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

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

但是，这个问题是指 2D 矢量路径。常用的路径运算有：Union、Substraction、Intersection、XOR(Exclusive Or)。

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

【问题讨论】：

你能举一些输入/输出对的例子吗？
那么像维恩图？
这些听起来像是集合操作，而不是布尔操作。而且你不能把两个圆圈变成一个数字 8。有一个 SVG 圆圈，但没有一个 SVG 数字 8。为此，您可能需要使用 KineticJS 之类的画布库。
我认为这并不容易，因为每个形状都是它自己的实体。这不像是在画布的同一位置绘制像素。
@FelixKling 好吧，我猜新生成的形状意味着“联合”在一起的 2 个形状将被删除，将新形状作为一个新实体。

【解决方案1】：

有Javascript Clipper，它允许路径上的所有Boolean Operations 集合，但条件是输入路径是一个多边形。

如果我们有任何曲线（三次/二次贝塞尔曲线），可以使用De Casteljau algorithm 轻松将它们细分为多边形。
- 如果细分样本足够高，则结果将是一个在视觉上看起来像曲线的多边形（以大量数据为代价，因为顶点数线性增加，具体取决于细分的保真度）。

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

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

【讨论】：