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

我正在使用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之间曲率的“控制点”.百分比是沿着曲线在0到1的范围内计算的距离.

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

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

解决方法:

您正在寻找的是Boolean Operations on Polygons

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

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

标签：javascript,canvas,svg,vector-graphics,inkscape
来源： https://codeday.me/bug/20190629/1330102.html