必须要理解掌握的贝塞尔曲线(原创)

简介: 在Android开发和面试中(尤其是面试),一些中高级岗位可能会问你自定义控件的详细内容,我们知道自定义控件这一块涉及到的内容很多,回答的越多越深入,那么面试的印象会更好。

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

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

贝赛尔曲线的前世今生:

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

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

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

贝赛尔曲线的数学理论:

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

  • 步骤一:在平面内选3个不同线的点并且依次用线段连接。如下所示..
img_b97b24216c723420286b918cef69631a.png
3点连线
  • 步骤二:在AB和BC线段上找出点D和点E,使得 AD/AB = BE/BC

    img_70e51ec215b66ec8f028beaf59770b05.png
    AD/AB = BE/BC

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

    img_177be8e33ff50fb6561a07ea6e6317bd.png
    DF/DE = AD/AB = BE/BC

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

img_c4a6aae0c484dc5a41f944937c8659de.gif
贝塞尔曲线

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

img_19b395c82db6a30c365f655ccba298c0.png
示例说明

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

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

贝赛尔曲线的N阶拓展(三阶贝塞尔与N阶贝塞尔曲线)

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

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


    img_f30e035e6a9335e305f406b2d5e4b8ca.png
    四点三线
  • 步骤二:同二阶贝塞尔曲线一样首先需要在线段上找对应的点(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


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


    img_4d91aa96434f1fe38c3088b742d1aa5c.png
    J点依次连线

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


img_61ee6ebfa816e57debe9e20c9c6d9fbe.gif
三阶贝塞尔

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


img_90b8e6a8e090df40ca0d7b4a368d6c74.gif
四阶贝赛尔曲线

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


img_beff4c1ad3924043d109a6648968fe18.gif
一阶贝赛尔

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

未完待续。。。

如果这篇文章对你有帮助,希望各位看官留下宝贵的star,谢谢。

Ps:著作权归作者所有,转载请注明作者, 商业转载请联系作者获得授权,非商业转载请注明出处(开头或结尾请添加转载出处,添加原文url地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。

相关文章
|
图形学
浅谈Unity之贝塞尔曲线
贝塞尔曲线的创建
这一篇让你彻底搞懂贝塞尔曲线
贝塞尔曲线不懂画?不知道怎么回事?看这一篇就够了!用图形,点曲线运动图和公式推导,让你彻底搞懂贝塞尔曲线的运行原理!
2087 0
这一篇让你彻底搞懂贝塞尔曲线
动画曲线天天用,你能自己整一个吗?看完这篇你就会了!
一旦用到动画,曲线 Curve 类不可避免会用到,但是用了那么多,你真的了解怎么用吗?本篇为你详细解读 Curve 类的实现,看完你就会设计自己的动画曲线了!
169 0
动画曲线天天用,你能自己整一个吗?看完这篇你就会了!
一条神奇的贝塞尔曲线及其应用(上)
今天的主题,就是主要和大家介绍贝塞尔曲线!
228 0
一条神奇的贝塞尔曲线及其应用(上)
|
Android开发
一条神奇的贝塞尔曲线及其应用(下)
今天的主题,就是主要和大家介绍贝塞尔曲线!
251 0
一条神奇的贝塞尔曲线及其应用(下)
|
数据可视化 图形学
Unity 之 贝塞尔曲线介绍和实际使用
Unity 中对贝塞尔曲线的实战应用,制作可视化操作曲线工具,文末附工具源码链接~
867 0
Unity 之 贝塞尔曲线介绍和实际使用
|
分布式计算 前端开发 JavaScript
canvas烟花锦集
canvas可以实现不同动画效果,本文主要记录几种不同节日烟花效果实现。 实现一 效果地址 html css body { background: #000; margin: 0;...
952 0