看图学贝塞尔曲线：易懂的贝塞尔曲线解析图

贝塞尔曲线，用了很久。比如PS钢笔工具，用起来很方便。但是基于啥原理，一时半会就讲不清楚。

在计算机图形领域应用非常广泛，比如我们熟知的 CSS 动画、 Canvas 以及 Photoshop 等都可以看到贝塞尔曲线的身影。

其实对这个概率一直是一知半解，今天，希望本文能够全面了解

贝赛尔曲线的前世今生：

贝塞尔曲线，这个命名规则一眼看上去大概是一个叫贝塞尔的数学家发明的。但，贝塞尔曲线依据的最原始的数学公式，是在1912年在数学界广为人知的伯恩斯坦多项式。简单理解，伯恩斯坦多项式可以用来证明，在[ a, b ] 区间上所有的连续函数都可以用多项式来逼近，并且收敛性很强，也就是一致收敛。再简单点，就是一个连续函数，你可以将它写成若干个伯恩斯坦多项式相加的形式，并且，随着 n→∞，这个多项式将一致收敛到原函数，这个就是伯恩斯坦斯的逼近性质。

时光荏苒岁月如梭，镜头切换到了1959年。当时就职于雪铁龙的法国数学家 Paul de Casteljau 开始对伯恩斯坦多项式进行了图形化的尝试，并且提供了一种数值稳定的德卡斯特里奥（de Casteljau） 算法。（多数理论公式是建立在大量且系统的数学建模基础之上研究的规律性成果）根据这个算法，就可以实现 通过很少的控制点，去生成复杂的平滑曲线，也就是贝塞尔曲线。

但贝塞尔曲线的声名大噪，不得不提到1962年就职于雷诺的法国工程师皮埃尔·贝塞尔（Pierre Bézier），他使用这种方法来辅助汽车的车体工业设计（最早计算机的诞生则是为了帮助美国海军绘制弹道图），并且广泛宣传（典型的理论联系实际并获得成功的示例），因此大家称为贝塞尔曲线 。

贝塞尔曲线主要用于二维图形应用程序中的数学曲线，曲线由起始点，终止点（也称锚点）和控制点组成，通过调整控制点，通过一定方式绘制的贝塞尔曲线形状会发生变化。

贝塞尔曲线分为哪些类型？

贝塞尔曲线根据控制点的数量分为：

• 一阶贝塞尔曲线（2 个控制点）

• 二阶贝塞尔曲线（3 个控制点）

• 三阶贝塞尔曲线（4 个控制点）

• n阶贝塞尔曲线（n+1个控制点）

贝塞尔曲线是如何绘制出来的？

既然贝赛尔曲线的本质是通过数学计算公式去绘制平滑的曲线，那就可以通过数学工具进行实际求证以及解释说明。当然对其进行数学求证就没必要了，因为这些伟大的数学家们已经做过了。下面讲如何绘制贝塞尔曲线

步骤一：在平面内选3个不同线的点并且依次用线段连接。如下所示..

步骤二：在AB和BC线段上找出点D和点E，使得 AD/AB = BE/BC

步骤三：连接DE，在DE上寻找点F，F点需要满足：DF/DE = AD/AB = BE/BC

步骤四：最最重要的！根据DE线段和计算公式找出所有的F点，记住是所有的F点，然后将其这些点连接起来。那，连接规则是什么？以上图为例，第一个连接点是A-F，第二连接点是A-F1（这个F1必须满足DF1/DE = AD/AB = BE/BC）以此类推，直到最后连接上C点，下面上一个动图加深理解：

可能有些朋友还是不理解，那么这个GIF我截下其中的一张图说明，如下图：

动图里的P0、P1、P2分别代表的是上图的：P0 == A；P1 == B；P2 == C。那么这个黑色点，代表的就是F点，绿色线段的2个端点（P0-P1线段上的绿色点，代表是就是D点，P0-P2线段上的绿色点，代表是就是E点）。线段上面点的获取，必须要满足等比关系。

关于贝赛尔曲线的基本数学理论大概就是上面的内容。两个线段根据等比关系找点的贝塞尔曲线，一般也称为二阶贝塞尔曲线。

贝赛尔曲线的N阶拓展（三阶贝塞尔与N阶贝塞尔曲线）

刚才说到，上面的贝赛尔曲线一般称为二阶贝塞尔曲线，既然是二阶贝塞尔曲线，那肯定有三阶贝塞尔曲线、四阶贝赛尔曲线等等。其实三阶贝塞尔与四阶贝赛尔曲线以及N阶贝赛尔曲线曲线的规则都是一样的，都是先在线段上找点，这个点必须要满足等比关系，然后依次连接，下面是三阶贝赛尔曲线的解释说明：

步骤一：三阶贝赛尔曲线，简单理解就是在平面内选4个不同线的点并且依次用线段连接（也就是三条线）。如下所示

步骤二：同二阶贝塞尔曲线一样首先需要在线段上找对应的点（E、F、G），对应的点必须要符合等比的计算规则，计算规则如下：AE/AB = BF/BC = CG/CD；找到对应的点以后接着依次链接EF、FG；接着在EF、FG线段上面继续找点H、I，对应的点依旧要符合等比的计算规则，也就是 EH/EF = FI/FG；最后连接H、I线段，在HI线段上面继续找点J、点J的计算规则需要符合：EH/EF = FI/FG = HJ/HI

步骤三：重复步骤二的动作，找到所有的J点，依次将J点连接起来，这样最终完成了三阶贝赛尔曲线。

整一个三阶贝赛尔曲线的动作加起来就是下面的一张动图：

那么四阶贝赛尔曲线的实现步骤也是一样的，平面上先选取5个点（5点4线）、依次选点（满足等比关系）、依次连接、根据计算规则找到所有的点（逐个连接）。。。。。。

貌似都是从二阶贝塞尔曲线说起的，那么一阶贝赛尔又是怎么样的？一阶贝赛尔如图：

可以看到一阶贝赛尔是一条直线！因此，N阶贝赛尔不仅可以画平滑的曲线也可以画直线，因此自定义控件画直线又多了一种可选择的方式，但是一般用贝赛尔主要是画曲线，这里只是提供了一种别的解决思路；另外，在Android属性动画，系统为我们提供了一个PathInterpolator插值器。这个PathInterpolator里面就有贝塞尔曲线的身影。有兴趣的小伙伴也可以去了解一下。

如何求贝塞尔曲线上的点坐标？

具体可以看此文：深入理解贝塞尔曲线 https://juejin.cn/post/6844903666361565191

参考文章：

必须要理解掌握的贝塞尔曲线（原创） https://www.jianshu.com/p/0c9b4b681724

深入理解B样条曲线（上） https://zhuanlan.zhihu.com/p/144042470

转载本站文章《看图学贝塞尔曲线：易懂的贝塞尔曲线解析图》,
请注明出处：https://www.zhoulujun.cn/html/theory/Mathematics/Algebra/8642.html