在上一次android高级UI之Canvas综合案例操练 - cexo - 博客园对于Android UI绘制中核心的Canvas进行了相关的学习，这块的学习也中断一年多了，既然主业是Android开发，没有任何理由能停止对它的继续学习探索，所以接下来对于Android UI的学习继续。

贝塞尔曲线基本概念：

目标：

对于贝塞尔曲线的绘制其实在之前QQ气泡效果剖析 - cexo - 博客园做QQ汽泡效果时已经用到过了，平常不自定义一些特殊的效果可能不一定能用到，但是！！！如果你不了解它的绘制，可能在需要它的时候你会很抓狂，因为它的使用也不是那么容易，我还记得早些年在一家公司叫我做一个电池充电过程中的水波纹效果就死活没有搞定，最后是让组里的一位大神帮忙解决了，当时的动画需求本身就比较复杂，网上也没有类似能满足要求的开源效果，我也就是对于贝塞尔曲线的绘制不了解导致做不出来，当时真的就是“书到用时方恨少”感受，所以接下来再来对它进行一个详细的了解，当作一个复习+巩固吧，最后还是以QQ汽泡的效果做为一个实战练习，效果如下：

整个效果用过手机版的QQ应该都比较熟悉了，不过这是没有集成到列表当中，对于列表当中如何集成也请移步到在RecyclerView中集成QQ汽泡一 - cexo - 博客园进行观赏。

那咱们这次主要学习的是怎么画“贝塞尔曲线”对吧，那对应这个QQ汽泡来说，哪里用到了呢？这里：

看到中间的上下两个曲线了吧，它们用到了，当然这是一个二阶贝塞尔【啥叫二阶贝塞尔呢？下面会学习到】，也是最最基础的，了解了基础的画法，对于它更加复杂的画法你也比较容易上手了，好，这是一个整体的目标。

整个学习会参考到这位大佬的简书：高级UI---LSN-7-1-贝塞尔曲线 - 简书，不过我这边会“去其糟粕,取其精华”，最终目的就是吸收成自己的。

概念了解：

首先要明白，对于贝塞尔曲线，它是分阶的，不同的阶数，其绘制的曲线效果也不一样，所以这里先来了解不同阶数的贝塞尔曲线的绘制情况。

一阶贝塞尔曲线：

先看一下效果：

一条直线。。不是贝塞尔是用来绘制曲线的么？是的，因为对于一阶贝塞尔实际没啥用，但是对于你了解它的概念是一个基础，等于它的核心目的其实就只是由两点控制的一条直线，绘制就是从一点绘制到另一点的整个轨迹，记住这个绘制过程，因为在理解二阶贝塞尔曲线的过程中，需要使用到它。

二阶贝塞尔曲线【重点】：

绘制过程：

对于二阶贝塞尔曲线来说，应该是应用最最广泛的，也是核心中的核心，对于贝塞尔曲线不是还有更加高阶复杂的曲线么？而要理解更加复杂的贝塞尔曲线，理解二阶就成为一个必须要掌握的了，只有掌握了二阶的画法，你才能更加从容的面对更加复杂的贝塞尔曲线，所以这块务必要理解透。

先来直观的感受一下它的绘制过程：

嗯，此图来自于csdn，看完此效果之后是不是觉得挺酷炫的？而在上面QQ汽泡效果中的那个曲线，是不是跟这个二阶曲线能联系起来？这也就是为啥在之后的贝塞尔曲线的案例应用时QQ汽泡效果使用的是二阶贝塞尔的原因了，但是你能看懂它的绘制规则么？反正我光看这动图还是一脸懵逼的，所以接下来会了解其原理，这样才能真正理解它。

绘制原理：

先明显对于二阶贝塞尔曲线是由三个点来进行构成的，如下：

其中AC这两点本来是应该绘制一条直线的对吧：

但是该直线需要受B点往下进行拖动，这个B其实就是一个控制点，正因为有这个控制点才会让本应该绘直线的最终变成了绘制曲线了，其实在我们电脑的绘制软件中也能直观的感受一下这个B点的控制点的魅力，比如我mac上用Paintbrush这个软件有一个曲线的绘制：

我要绘制一条曲线，也是先绘制一条直线，然后再通过对直线的拖拽才完成曲线的绘制的，如下：

所以，此时应该对于B点它的出现的意义有了直观的了解了吧，接下来重点是就来看一下这个曲线的绘制规则了，这里先把两点到控制点连接两条直线，如下：

然后曲线的整体绘制是由AB这条一阶贝塞尔曲线来控制：

那AC的这根曲线很显然也是由一大堆的点的连续构成的对吧，让曲线上的绘制点又是如何来确定的呢？现在整个曲线的控制是由AB这个贝塞尔曲线来控制，它是一个运动的轨迹【这一点必须要理解到位，它是不断在走的，不明白的可以看一下一阶贝塞尔曲线的那个动图】，也就是AB上走了多少个点，就会对应的生成曲线上的各个点，这里以AB上的某一个静止点进行分析，把它如何确定最终曲线上的绘制点的搞清楚了，你也就明白了整个曲线的绘制原理了，比如AB上的贝塞尔曲线走到D这个点了：

其中这条直线上的AD跟DB就有一个比例关系了对吧，这时在BC上也取一个点E，其比例跟D点比例一样【注意关键词，比例要一样】，如下：

好，此时将DE进行一个连线：

接下来的绘制点就是在DE上了，那。DE上对应的绘制点是如何确定的呢？也是同样的套路，在这条直线上取一点F，要保证比例跟AD的一样，如下：

此时F点就是最终要绘制在曲线上的一个点【注意它只是曲线上的一个点哟】，如下：

曲线上的某个点我们已经知道怎么算出来了，我们由A-C开始启动绘制，则会算出曲线上的N个点，用PATH记录这个点进行绘制，从而y就得到了一条曲线，这条曲线就是所谓的贝塞尔曲线。这里再来回忆一下整个二阶贝塞尔曲线完整的绘制过程：

其中t表示整个曲线的点的次数，盯着那根绿色的那根线看，是不是能感受到比例正好跟P0到P1的一阶贝塞尔走的位置比例一样，截一个静态图说明一下：

计算公式：

其实对于二阶贝塞尔曲线在百度上能搜到相关的公式：

但是我看不太懂，其实有一个比较容易理解的计算公式，还是以这个图为例：

想要找到绘制点的话只需要遵守DF:DE= AD:AB= BE:BC，那么此时F点就是绘制点，因为比例是一样的。

三阶贝塞尔曲线：

绘制过程：

绘制原理：

其原理跟二阶的一样，看一下图：

从上图我们可以看到三阶比二阶多了一条线段，实际上表示的是最终开始点在A结束在B
中途会往C的方法有一定的移动，然后最终到D结束，计算方式有一定的区别，先由AB BC计算出一条线，在由BC CD 计算出第二条线构建一个二阶的贝塞尔，然后进行绘制，最终绘制的点是J ，同样满足这样的公式：AE:AB= BF:BC= CG:CD= EH:EF= FI:FG= HJ:HI。

android高级UI之贝塞尔曲线＜上＞---基本概念、德卡斯特里奥算法相关推荐

贝塞尔曲线N阶实现-德卡斯特里奥算法(De Casteljau’s Algorithm)
贝塞尔曲线很多客户端已经自行集成,安卓ios或是web,今天基于算法动手实现一次,今天只放源码,暂时不做说明了(还要加班,--~),源码在下面,直接看也能看懂德卡斯特里奥算法的基础就是在向量AB上选 ...
【Android UI】贝塞尔曲线 ⑦ ( 使用德卡斯特里奥算法公式计算的方法绘制三阶贝塞尔曲线示例 )
文章目录一.使用德卡斯特里奥算法公式计算的方法绘制三阶贝塞尔曲线二.代码示例贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.使用德 ...
【Android UI】贝塞尔曲线 ⑤ ( 德卡斯特里奥算法 | 贝塞尔曲线递推公式 )
文章目录一.德卡斯特里奥算法二.贝塞尔曲线递推公式贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.德卡斯特里奥算法贝塞尔曲线的三阶 / ...
德卡斯特里奥算法（De Casteljau’s Algorithm）绘制贝塞尔曲线
原文:http://blog.csdn.net/Fioman/article/details/2578895 德卡斯特里奥算法可以计算贝塞尔曲线上的点C(u),u∈[0,1].因此,通过给定一组u的值 ...
德卡斯特里奥算法——找到Bezier曲线上的一个点
http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/de-casteljau.html 随着Bezier曲线的构造,接下来最 ...
塞尔曲线德卡斯特里奥（de Casteljau）算法及程序
贝塞尔曲线德卡斯特里奥(de Casteljau)算法及程序设P0.P02.P2是一条抛物线上顺序三个不同的点.过P0和P2点的两切线交于P1点,在P02点的切线交P0P1和P2P1于P01和P11 ...
贝塞尔曲线德卡斯特里奥（de Casteljau）算法
这篇文章比较好理解些~ 设P0.P02.P2是一条抛物线上顺序三个不同的点.过P0和P2点的两切线交于P1点,在P02点的切线交P0P1和P2P1于P01和P11,则如下比例成立: 这是所谓抛物线的三 ...
android高级UI之PathMeasure＜一＞--Path测量基础（nextContour、getPosTan、getMatrix、getSegment）
前言: 在上一次android高级UI之贝塞尔曲线<下>--贝塞尔曲线运用:QQ消息气泡完成了对于贝塞尔曲线绘制的学习,今天准备学习UI绘制中经常会用到的跟Path相关的一些知识,也是很重 ...
Android 高级UI解密 (四) ：花式玩转贝塞尔曲线（波浪、轨迹变换动画）
讲解此UI系列必然少不了一个奇妙数学曲线-–贝塞尔曲线,它目前运用于App的范围是在太广了,最初的QQ气泡拖拽,到个人界面的波浪效果.Loading波浪效果,甚至于轨迹变化的动画都可以依赖贝塞尔曲线完 ...

android高级UI之贝塞尔曲线＜上＞---基本概念、德卡斯特里奥算法

贝塞尔曲线基本概念：

目标：

概念了解：

一阶贝塞尔曲线：

二阶贝塞尔曲线【重点】：

三阶贝塞尔曲线：

更多阶贝塞尔曲线：

android高级UI之贝塞尔曲线＜上＞---基本概念、德卡斯特里奥算法相关推荐

最新文章

热门文章