paper.js union 的异同交集

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。如果您使用高采样率，视觉结果与真实曲线相同，但您会失去路径的弯曲特性。

Answer 2

虽然我不会说这是一个重复的问题，但我相信您会从这个question 的答案中找到深刻的见解，因为它非常相似。

我确实在这里找到了该问题的答案中未提及的另一种资源： http://13thparallel.com/archive/bezier-curves/

除此之外，该问题中提到的最佳资源在这里： http://blog.mackerron.com/2011/01/01/javascript-cubic-splines/

这两个资源都详细介绍了可以满足您的需求的特定功能。虽然它们不是完全“库”，但代码很容易移植到您的项目中以供您使用。