javascript - paper.js 联合差异和交集

Question

我正在使用 paper.js 开发一个项目，我需要根据其他两个路径的交集、差异和并集来创建新路径。我做了一些挖掘，发现了插值三次贝塞尔曲线的数学函数，但我想知道是否有任何 javascript 库可以进行类似 svg 的向量运算。如果有的话，我会复制 inkscape 并将其转换为 javascript，但你永远不知道。无论如何，插值三次贝塞尔曲线的数学函数如下:

Pointx = (Ax * percent^3) + (Bx * 3 * (percent^2 * (1-percent))) + (Cx * 3 * (percent * (1-percent)^2)) + (Dx * (1-percent)^3)
Pointy = (Ay * percent^3) + (By * 3 * (percent^2 * (1-percent))) + (Cy * 3 * (percent * (1-percent)^2)) + (Dy * (1-percent)^3)

其中 A、B、C 和 D 是曲线的点。 A 是起点，D 是终点，B 和 C 是操纵 A 和 D 之间曲率的“控制点”。percent 是沿着曲线计算的距离0 到 1。

因此，想出一个插值函数会非常简单，该函数返回提供的贝塞尔曲线的一个点和沿贝塞尔曲线的百分比。找到倒数 - 给定点(或 x 值或 y 值)的百分比将很困难。或者更难，两个贝塞尔曲线相交(我不是很擅长数学)。我希望这就是 inkscape 的功能所提供的。

有没有可以快速进行这种矢量插值的javascript库？如果没有，我会在这里发布我提出的算法。谢谢!

Answer 1

你要找的是一个叫做 Boolean Operations on Polygons 的东西

Paper.js 现在似乎使用相当不错的 BoolOps，它们直接处理贝塞尔曲线。如果你问我，这应该是首选。这是一个不错的 example .

在另一种情况下，您可以使用 De-Casteljau algorithm 对形状进行多边形化并将它们输入 Javascript Clipper .如果您使用高采样，视觉结果与真实曲线相同，但您失去了路径的弯曲特性。