贝塞尔曲线

作者: Alan_兰哥 | 来源:发表于2019-10-30 13:54 被阅读0次

在Android开发中经常会碰到自定义控件。自定义控件涉及的内容比较多，如测量和绘制、事件分发的处理、动画效果的渲染与实现，当然还有不得不提的贝赛尔曲线，相信很多小伙伴都知道贝塞尔曲线这个词。但是，可能并不是每位小伙伴都清楚地知道，到底什么是贝塞尔曲线，又是什么特点让它这么备受欢迎。

贝赛尔曲线的前世今生：

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

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

贝赛尔曲线的数学理论：

贝赛尔曲线的本质是通过数学计算公式去绘制平滑的曲线，这些曲线是用一系列点来控制曲线状态的，我们将这些点简单分为两类，一类是数据点，一类是控制点。那么该如何求贝塞尔曲线上的点坐标？

一阶贝赛尔：

一阶贝赛尔

可以看到一阶贝赛尔是一条直线！对于一阶贝塞尔曲线，我们可以通过几何知识，很容易根据
t的值得出线段上那个点的坐标：

一阶贝赛尔曲线公式

二阶贝赛尔：

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

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

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

DF/DE = AD/AB = BE/BC
4.步骤四：最最重要的！根据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