SVG路径字符串上的布尔运算 [英] Boolean operations on a SVG pathstring

问题描述

我遇到了一个概念上难以解决的问题。

I've come to a conceptually difficult problem.

简而言之，我需要找到通过不同布尔运算组合的两个矢量路径的矢量路径。如联盟，差异，交叉点和减法。如果我可以做到类似于Canvas如何进行globalCompositeOperation，那将是很好的。

In short, I need to find the vector path of two vector paths combined through different boolean operations. Such as the Union, the Difference, the Intersection, and Subtraction. It would be nice if I could do it similar to how Canvas does it's globalCompositeOperation.

我将如何在世界上这样做？

How in the world would I go about doing this?

推荐答案

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

There is a JavaScript library that allows for boolean operations on SVG paths under the condition that the path is a polygon. Using a high enough sampling, the beziers can be polygonized to such a high quality that the visual result is almost identical to a true curve.

该库被称为 JavaScript Clipper ，它是 Angus Johnson's Clipper （用Delphi，C ++，C＃和Python编写），后者基于 Bala R. Vatti的裁剪算法。它能够处理所有多边形情况，包括自相交的情况。该库有许多额外的功能，包括所有布尔操作和节点闪电算法，用于减少节点数。

The library is called JavaScript Clipper and it is a port of Angus Johnson's Clipper (written in Delp C++, C# and Python), which in turn is based on Bala R. Vatti's clipping algorithm. It is able to handle all polygon cases, including the self-intersecting ones. The library has many extra functions, including all of the boolean operations and a node lightening algorithm for reducing the node count.

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