贝塞尔曲线

在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

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

贝塞尔曲线
文章图片
J点依次连线
整一个三阶贝赛尔曲线的动作加起来就是下面的一张动图:
贝塞尔曲线
文章图片
三阶贝塞尔
计算公式如下:

贝塞尔曲线
文章图片
三阶贝塞尔曲线计算公式 那么四阶贝赛尔曲线的实现步骤也是一样的,平面上先选取5个点(5点4线)、依次选点(满足等比关系)、依次连接、根据计算规则找到所有的点(逐个连接)。。。。。。

贝塞尔曲线
文章图片
四阶贝赛尔曲线 五阶贝赛尔曲线:

五阶贝赛尔曲线 n阶贝赛尔曲线计算公式如下:

贝塞尔曲线
文章图片
n阶贝赛尔曲线计算公式 关于贝塞尔曲线,就讲到这里,通过这篇文章,相信小伙伴们应该都知道贝塞尔曲线是怎么绘制出来的。
参考:https://www.jianshu.com/p/0c9b4b681724
【贝塞尔曲线】作者:Alan
原创博客,请注明转载处....

    推荐阅读