SVG 路径字符串上的布尔运算答案

【问题标题】：Boolean operations on a SVG pathstringSVG 路径字符串上的布尔运算
【发布时间】：2012-09-19 22:49:32
【问题描述】：

我遇到了一个概念上的难题。

简而言之，我需要通过不同的布尔运算找到两个向量路径组合的向量路径。例如并集、差集、交集和减法。如果我能像 Canvas 的 globalCompositeOperation 那样做就好了。

我该怎么做呢？

【问题讨论】：

贴出你的示例代码，会有帮助的！
我一直在问[this][1]，可能对你有帮助[1]：stackoverflow.com/questions/11880739/…

标签： javascript svg raphael computational-geometry vector-graphics

【解决方案1】：

有一个 JavaScript 库允许在路径是多边形的情况下对 SVG 路径进行布尔运算。使用足够高的采样率，可以将贝塞尔曲线多边形化到如此高的质量，以至于视觉结果几乎与真实曲线相同。

该库名为JavaScript Clipper，它是Angus Johnson's Clipper（用Delphi、C++、C#和Python编写）的一个端口，它又基于Bala R. Vatti's clipping algorithm.它能够处理所有多边形情况，包括自相交的那些。该库有许多额外的功能，包括所有布尔运算和用于减少节点数的节点减轻算法。

【讨论】：

我使用过 JSClipper，发现它不仅对布尔运算非常强大，而且对折线和多边形的偏移也非常有用。该框架的其他版本可用于多种编程语言，例如C++、C#、Delphi、Python、Perl、Ruby 和 Haskell。

【解决方案2】：

如果您需要创建由许多其他形状相交、联合等组成的新几何形状，您要么必须自己在脚本中处理它，要么使用矢量图形编辑器（Inkscape 和 Illustrator 都提供此功能）功能）为您执行此操作。

【讨论】：

【解决方案3】：

globalCompositeOperation 的等价物是 SVG 中的 feComposite 过滤器。这是an example，看起来类似于在 Opera 中工作的this in canvas。

【讨论】：

不，这是一个仅渲染选项。