https://medium.com/@rdfuhr/exploring-bezier-and-spline-curves-a8261b3c7a8b
贝塞尔曲线和样条曲线以及曲面广泛用于汽车和飞机的设计中。Bezier曲线以较小的比例表示字母的形状，包括您现在正在阅读的本文所使用的字体定义。
这是我开发的交互式Web应用程序的链接，使您可以浏览Bezier和样条曲线的某些属性。
https://richardfuhr.neocities.org/BusyBCurves.html
本文的目的是提供对该应用程序的介绍，并描述您将看到的曲线的一些数学特性。
为了最好地理解本文和应用程序，您应该对多项式的概念相当满意。例如，三次多项式的形式为f（x）=ax³+bx²+ cx + d。您还应该熟悉平面中参数曲线的概念，该曲线可以以C（t）=（x（t），y（t））的形式编写。
贝塞尔曲线是参数曲线，通常为2D或3D。在这里，我们将研究2D曲线。因此，贝塞尔曲线可以写成
C（t）=（x（t），y（t））
另一个要求是x（t）和y（t）是多项式。在这里，我们将研究多项式的次数等于3的情况，我们称这些三次 贝塞尔曲线。最后的要求是，x（t）和y（t）不能以我们在高中时学到的熟悉的形式表达：at³+bt²+ ct + d，而应以相当隐秘的形式表达
x（t）= X0 * B0（t）+ X1 * B1（t）+ X2 * B2（t）+ X3 * B3（t）
y（t）= Y0 * B0（t）+ Y1 * B1（t）+ Y2 * B2（t）+ Y3 * B3（t）
哪里
B0（t）=（1-t）³
B1（t）= 3（1-t）²* t
B2（t）= 3 （1-t）t²
B3（t）=t³
和B0（t），B1（t），B2（t），B3（t）被称为3级伯恩斯坦多项式。事实证明，这些伯恩斯坦多项式构成了所有三次多项式空间的基础，这意味着每个三次方都可以唯一表示为四个伯恩斯坦多项式的线性组合。
我们可以将上面的（Xi，Yi）表示为平面中的Pi点，这样
贝塞尔曲线C（t）=（x（t），y（t））可以写成
C（t）= P0 * B0（t）+ P1 * B1（t）+ P2 * B2（t）+ P3 * B3（t）
如果这看起来有点令人生畏，那是可以的，但是为了使用Bezier曲线，并不需要理解数学的所有细节。导出所有潜在的数学特性也不是本文的目的。关于这个主题有很多书。如果您在应用程序中单击“帮助”，则将提供指向某些Wikipedia文章的链接。
您可能仍然在问：为什么我们要用这些相对模糊和混乱的函数B0，B1，B2和B3代表高中时期的老式的熟悉的三次多项式？
好吧，事实证明，当我们以这种方式表示C（t）时，就控制点 P0，P1，P2和P3以及伯恩斯坦多项式B0，B1，B2和B3而言，则是计算和图形锻炼得很好。例如，可以以有效且稳定的方式计算沿曲线的点。而且，曲线的形状直接且直观地与控制点的位置相关。
此实现是由雷诺（Renault）的皮埃尔·贝济耶（PierreBézier）和雪铁龙（Citroën）的保罗·德·卡斯特尔乔（Paul de Casteljau）分别独立和同时完成的
一幅图片价值1000个单词，一个动画价值1000个图片，因此当您运行应用程序，启动动画或直接操纵控制点P0，P1，P2和P3时，所有这些都将变得更加清晰。
启动Web应用程序时，您看到的第一个屏幕将类似于以下所示。
[图片上传中...(image-a6a9ba-1587975570681-1)]
[图片上传中...(image-851e6a-1587975570681-3)]
对于初学者，请单击“开始动画”按钮，查看四个蓝色控制点如何随着红色曲线（贝塞尔曲线）上的黄色点沿曲线来回移动而扩展和收缩。
这里要记住的最重要的一点是，黄点始终位于四个蓝色圆圈的重心处。
四个蓝色圆圈旁边的绿色小图是四个三次Bernstein多项式的图，四个蓝色圆圈的面积由相应的Bernstein多项式的当前值控制。
查看动画后，尝试通过单击并拖动一个圆来操纵控制点或曲线上的点。您可以通过单击“帮助”按钮获得更多信息。
在尝试了一段时间的Bezier曲线后，单击标为Spline的单选按钮，您将看到一个类似于下图的屏幕。
[图片上传中...(image-af0026-1587975570681-0)]
[图片上传中...(image-71d698-1587975570681-2)]
您在此处看到的是三次样条曲线的图形，它类似于三次贝塞尔曲线，只是更复杂。这次，红色曲线不是由三次曲线参数多项式组成，而是由五个（在这种情况下）单独的三次参多项式组成，它们在由小黑色矩形表示的位置处相互连接。对应于这些连接点的参数值称为结。
另外，这次，不是四个控制点，而是八个！但是，对于曲线上黄点的每个位置，八个控制点中只有四个确定黄点的位置，如白圈内的蓝色圆圈区域所表示。
要查看实际效果，请单击“开始动画”按钮，观察蓝色圆圈的膨胀和收缩，并且蓝色圆圈的面积始终由函数的值确定，这些函数的图形在相应的控制点圆圈旁边。这些功能称为B样条曲线。
与简单的贝塞尔曲线一样，在样条曲线的情况下，黄点始终位于四个蓝色圆圈的重心处。这次，将始终有四个圆圈不参与控制黄点的位置。但是，当您更改参数值时，所有圆圈都有机会参与，这可以通过动画或直接拖动黄点看到。
许多人为计算机图形学和其他领域的样条线的发展做出了贡献。据我所知，艾萨克·斯科伯格（Isaac Schoenberg）是第一个使用“样条线”作为该数学对象的名称的人，使用了可以弯曲并用来弯曲的柔性木制或金属条（也称为样条线）的名称。绘制平滑曲线。Schoenberg开发了很多样条曲线的基本理论。后来，卡尔·德布尔（Carl de Boor）开发了当今使用的许多算法，他的著作《样条线实用指南》（A Practical Guide to Splines）涵盖了该理论的不可思议的细节。
由于该应用程序是网络应用程序，因此应在大多数台式机和笔记本电脑上的大多数浏览器上运行，并运行Windows，macOS，Linux和ChromeOS。它还应在平板电脑和智能手机上运行。
该应用程序的网址为https://richardfuhr.neocities.org/BusyBCurves.html
我使用HTML5和TypeScript的组合编写了此Web应用程序。如果您能够在浏览器中查看应用程序的源代码，则将看到从TypeScript生成的JavaScript。SVG是否是实现此类应用程序的可行替代方案？我不知道。
如果您对此有任何想法或其他疑问，请在下面的评论部分中发布。
谢谢！