样条插值学习笔记分享

大家好，欢迎来到IT知识分享网。

找到一个介绍样条曲线非常好的相关内容，一则分享给大家，二则相当于做个笔记，后面方便自己回头查看。废话不多说，直接开始：

1. 三次贝塞尔曲线由它们的端点（通常称为节点）和两个控制点指定。但是贝塞尔曲线不会插入它们的控制点（它们不会穿过它们），所以我们不能只将我们的点列表传递给bezierCurveTo()，我们将不得不弄清楚这些控制点需要在哪里。这就是所有这一切归结为：为了获得我们想要的外观，一系列三次贝塞尔曲线的控制点应该在哪里？
2. 关于控制点定位的文献非常广泛，通常是数学形式的，而且过于复杂。我的直觉告诉我，一个简单的几何问题应该有一个简单的几何解法——你会在这里看到它确实如此。
3. 如果您不关心几何图形，只是想继续使用它，我的代码（演示的源代码）只需调用一次即可绘制漂亮的连接曲线（即插值样条曲线）：drawSpline(ctx, points, t, closedCurve )，其中ctx是画布上下文对象，points是我们要连接的点的简单数组[x0,y0,x1,y1,…xn,yn]，t是一个常量，通常是0.3到0.5，这根据您的喜好控制平滑度，而closedCurve是一个布尔值，表示端点是否应该平滑连接。演示中的动画从 0.5 到 1 到 0 到 0.333 滑动t，让您感受一下这意味着什么。

要求

曲线段（= 样条曲线）必须穿过每个结点。它们必须“平滑”地连接在节点处，也就是说，在那里具有相同的斜率（一阶导数）。它们在节点处不需要具有相同的曲率（二阶导数）；这是可取的，但三次多项式中只有这么多自由度 – 不能拥有全部。我们应该能够调整曲线的平滑度：例如，如果我们正在做严格的矩形布局（如城市街区），我们可能希望在节点处有相当紧的曲线。我们应该能够，可选地，连接曲线的端点并使整个闭合曲线平滑（无尖点）。实施应该紧凑、稳定、快速，并且易于放入任何支持画布的 Javascript 页面。

几何学

图 1 显示了目标：如果我们可以创建两条贝塞尔曲线（以红色和橙色显示），开始和结束于点 x0 和 x2，并在点 x1 处平滑连接，那么我们可以重复该过程并将任意数量的结点拼接在一起.

图 1：我们的目标：两条三次贝塞尔曲线在 x1 处连接

从关于贝塞尔样条曲线的文献中学到的主要知识首先是，为了实现平滑连接，节点两侧的控制点必须位于穿过节点的线上，其次，该线应平行于连接侧翼节点的线。如图 2 所示，我们的控制点将位于与线 L02 平行的线 L1 上的某处。

图 2：基线

通过一些擦除使草图更清晰，图 3 显示了我们需要的更多内容：首先，节点 d01 和 d12 之间的距离。这些可以很容易地从我们的输入数据的节点 (x,y) 坐标中计算出来。我们还需要直角三角形 T，它连接 x0 和 x2，宽度为 w 和高度为 h，也很容易从节点坐标计算出来。

图 3：父三角形和结间距离

最后一步是绘制两个较小的三角形，类似于 T（相同的角度和方向），它们的长边沿线 L1（它们平行）并在点 x1 处连接。这些较小的三角形 Ta 和 Tb 从 T 缩小了两个因素：首先，分别是距离 d01 和 d12，其次是常数参数 t。与结间距离成比例缩放是获得适当曲率的简单方法：如果两个结非常接近，则它们之间的控制点应靠近结以确保“紧角”。T 的缩放为我们提供了 Ta 和 Tb 的宽度和高度，通过这些可以很容易地从点 x1 找到控制点 p1 和 p2 的坐标。这是Javascript：

函数 getControlPoints(x0,y0,x1,y1,x2,y2,t) { var d01=Math.sqrt(Math.pow(x1-x0,2)+Math.pow(y1-y0,2)); var d12=Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)); var fa=t*d01/(d01+d12); // 三角形 Ta 的比例因子 var fb=t*d12/(d01+d12); // Tb 同上，简化为 fb=t-fa var p1x=x1-fa*(x2-x0); // x2-x0 是三角形 T 的宽度 var p1y=y1-fa*(y2-y0); // y2-y0 是 T 的高度 var p2x=x1+fb*(x2-x0); var p2y=y1+fb*(y2-y0); 返回 [p1x,p1y,p2x,p2y]; }

图 4：相似三角形定义控制点

代码中的其他所有内容都只是簿记。在这些草图中，我们发现了两个控制点，但对于不同的贝塞尔曲线：需要控制点 p1（图 4）来绘制左贝塞尔曲线（图 1 和 2 中的红色），需要 p2 来绘制右（橙色）贝塞尔曲线。这只是意味着我们必须在绘制之前计算所有的控制点（或者至少是我们所在位置前后的结点）。闭合曲线需要“开始”和“结束”点（无论你在哪里开始和结束）的控制点，更多的簿记。但结果是一个简单、快速的贝塞尔样条例程，只有一个参数来调整曲率。

请注意，在演示中，当 t=0 时，曲线变为连接结点的直线，而当 t=1 时，曲线对于开放之字形曲线“太弯曲”，但实际上对于正方形（左下角），t=1制作一个漂亮的“圆角正方形”，可能是一个有用的形状。t 没有上限，但在 t=1 以上时，您几乎肯定会遇到令人分心的尖峰和环路。就此而言，t 可以是负数，这对于打结非常有用。

写一个样条插值的方法，一起来看看效果：

要拟合的曲线方程是这个：

从下图可以看到，随着插值的点数不断增加，从2个点增加到2500个点，橘黄色的拟合线条与蓝色的理论线条越接近。

再换一个正弦曲线看看：

27个拟合点的拟合情况

420个点的拟合情况

有了这个方法，就可以处理一些复杂图形的齿形了，并且在后面其他很多地方都可以用上。

以上就是今天分享的内容了，喜欢的小伙伴帮忙点个赞，谢谢！

我是woodykissme，定期分享有关，机械传动及齿轮加工方面的内容，对这方面感兴趣的小伙伴，可以关注我。希望能够与大家讨论一下：

齿轮的设计及加工方法，加工齿轮所用的刀具设计、制造及使用方面的相关问题。

• 齿轮刀具设计计算方法，相关应用程序的开发，CAD二次开发自动绘图等的相关技术问题。
• 刀具应用方面，刀具的切削参数、涂层和使用寿命，加工中遇到的问题和解决办法等问题。

今天就分享到这，感谢您抽出宝贵的时间阅读！

往期精彩内容：

《齿形齿向误差学习笔记分享》

《滚齿的齿根圆弧大小到底是多少，和刀具有什么关系？》

《插齿切削学习笔记之一》

《集成了多个功能，逼我自己写了一个齿轮计算工具》