5

我正在 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 库？如果没有，我会在这里发布我提出的算法。谢谢！

4

2 回答 2

3

您正在寻找的是所谓的多边形布尔运算

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

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

于 2013-08-18T10:12:58.053 回答
1

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

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

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

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

于 2012-12-07T22:56:46.683 回答