SVG路径字符串的布尔运算

Question

SVG路径字符串的布尔运算

javascriptsvgraphaelcomputational-geometryvector-graphics

5

我遇到了一个概念上比较困难的问题。

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

我该如何解决这个问题呢？

- Ryan Allred

1

发布你的示例代码，那会很有帮助！ - turtledove

2

我一直在询问这个问题，也许它可以帮到你。 - philipp

看起来PaperJS有这个功能，如果JS是您偏爱的语言。http://paperjs.org/examples/boolean-operations/ - Sid Datta

@SidDatta，现在可以了。但是在2012年还不行。 - Ryan Allred

@RyanAllred 这个评论是给那些像我一样来到这个页面的其他人看的 :-P。如果你仍在同一个项目上工作并且还没有找到解决方案，那就有一点小小的机会。 - Sid Datta

3个回答

1

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

- Erik Dahlström

0

globalCompositeOperation 的等效物是 SVG 中的 feComposite 滤镜。这里有一个类似于在 canvas 中工作的 this in canvas 的示例，它可以在 Opera 中使用。

- Robert Longson

不，这只是一个渲染选项。 - Robert Longson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nicholaswmin · Accepted Answer

有一个JavaScript库可以在路径为多边形的条件下进行SVG路径的布尔运算。通过足够高的采样，贝塞尔曲线可以被多边形化，以达到几乎与真实曲线相同的视觉效果。

这个库叫做JavaScript Clipper，是Angus Johnson's Clipper（用Delphi、C++、C#和Python编写）的移植版本，而Angus Johnson's Clipper则基于Bala R. Vatti的剪辑算法。它能够处理所有的多边形情况，包括自相交情况。该库还有许多额外的功能，包括所有布尔运算和节点轻量化算法以减少节点数。