paper.js联合差异和交集

时间:2012-12-07 22:49:51

标签: javascript canvas svg vector-graphics inkscape

我正在使用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值)的百分比将是困难的。或者更难,两个beziers相交(我不太擅长数学)。我希望这是inkscape的功能所提供的。

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

2 个答案:

答案 0 :(得分:2)

您要找的是 Boolean Operations on Polygons

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

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

答案 1 :(得分:1)

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

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

除此之外,该问题中提到的最佳资源如下: http://blog.mackerron.com/2011/01/01/javascript-cubic-splines/

这些资源都详细介绍了能够满足您需求的特定功能。虽然它们不是“库”,但代码可以很容易地移植到您的项目中。