通俗易懂的贝塞尔曲线讲解（转载）

柔光的暖阳◎ 2023-01-19 11:50 2阅读 0赞

最近在看svg相关知识时，看到贝塞尔曲线，之前也知道有这个，但一直不知道它到底是个什么东西（大学好像学过，但已经还给老师了）

在网上找到一篇一看就懂的讲解

在Android开发和面试中（尤其是一些中高级岗位面试），面试官可能会问你自定义控件的详细内容，我们知道自定义控件这一块涉及到的内容很多，回答的越多越深入，那么面试的印象会更好。自定义控件涉及的内容比如测量和绘制、事件分发的处理、动画效果的渲染与实现，当然还有不得不提的贝赛尔曲线（实际上一些面试官自己都不是很理解二阶贝塞尔、三阶贝塞尔曲线等概念）。

一些朋友看到以歪果仁大佬名字定义的一些计算公式、定理就头大（比如梅涅劳斯（Menelaus）定理、塞瓦(Ceva)定理等），不得不承认我也是。本着《士兵突击》不抛弃不放弃的精神，因此就算是在难啃的骨头我们也要坚持啃下来！所以本篇文章主要介绍的是贝赛尔曲线的基本概念、在Android的应用场景以及一些思考。不考虑篇幅的情况下力求将概念和理解写的详细。

贝赛尔曲线的前世今生：

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

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

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

贝赛尔曲线的数学理论：

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

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

3点连线

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

贝塞尔曲线

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

![20210510113116608.png][]

示例说明

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 3][]

*  步骤二：同二阶贝塞尔曲线一样首先需要在线段上找对应的点（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
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 4][]
 *  三阶贝赛尔曲线找点
 *  步骤三：重复步骤二的动作，找到所有的J点，依次将J点连接起来，这样最终完成了三阶贝赛尔曲线。
    
    J点依次连线

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 5][]

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

![2][]

三阶贝塞尔

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

四阶贝赛尔曲线

![3][]

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

一阶贝赛尔

![4][]

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

转自简书   作者：骑小猪看流星  
链接：https://www.jianshu.com/p/0c9b4b681724  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70]: /images/20221021/6de5c64749df43d98c68caa31372416b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 1]: /images/20221021/cca3acf7b462454ab75df1e88309f03a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 2]: /images/20221021/709fe9e0771748fd8d4b0cb2c643edfa.png
[img1]: /images/20221021/317449511573478aa6d6489cab7cec28.png
[20210510113116608.png]: /images/20221021/90d0d303a1634d6db0268e1204a85cac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 3]: /images/20221021/461a8db5321240ba84e75d9925785b8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 4]: /images/20221021/d1c22f91b1634031b5385a22b7745828.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 5]: /images/20221021/43e7688a4c2b4f58b0c2463cd4600505.png
[2]: /images/20221021/901f78479cfe434bba073307139ea92e.png
[3]: /images/20221021/7e6c39a6f8534042b00d22242dde941e.png
[4]: /images/20221021/5ed4525c546f424291cac6c494a0ed11.png