SVG路径上的布尔运算 [英] Boolean Operations on SVG paths

问题描述

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

As of early 2014, SVG spec does not have any built-in support for Boolean Operations

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

Boolean operations are methods for altering the inherent geometry of mostly overlapping paths. They allow the construction of complicated shapes by performing operations on simpler shapes and are somehow similar to Constructive Solid Geometry(CSG).

然而，这个问题涉及2D矢量路径。
流行的路径操作是：联盟，减法，交集，异或（独家或）。

However this question refers to 2D vector paths. The popular path operations are: Union, Substraction,Intersection, XOR(Exclusive Or).

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

Are there any libraries floating around that would help me out in this?

推荐答案

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

There's Javascript Clipper, which allows for all the sets of Boolean Operations on paths but under the condition that the input path is a polygon.

• 如果我们有任何曲线（Cubic /二次贝塞尔曲线），它们可以使用 De Casteljau算法。

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

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

Then we can feed the path in JavaScript Clipper for the Boolean Operations.

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

The caveat here is that we lose the inherent "curvy" nature of the path if it contains curves. Doing the "polygonization" mentioned above is, more or less, a one-way street.

这篇关于SVG路径上的布尔运算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！