二、三阶贝赛尔曲线示例

2,627 阅读2分钟
原文链接: www.jianshu.com

贝赛尔曲线大家应该都不陌生吧,如果你还陌生,那应该看看本文示例讲解的二、三阶贝赛尔曲线。
本篇文章从基础开始,自定义View来使用Android系统提供的贝赛尔曲线API。
贝塞尔曲线(Bezier Curve)于1962,由法国工程师皮埃尔·贝塞尔广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。

首先我们要知道二、三阶贝赛尔曲线是一种什么样的曲线呢,二阶贝赛尔曲线有一个起始点、一个终止点和一个控制点,曲线连接起始点和终止点,
并且控制点分别与起始点和终止点的连线是曲线的切线。同样三阶贝赛尔曲线有两个控制点,下面看一下它们的效果图。

二阶贝赛尔曲线


二阶贝赛尔曲线效果图

三阶贝赛尔曲线


三阶贝赛尔曲线效果图

基础巩固

本示例中主要用了Paint和Path来绘制贝赛尔曲线,下面把它们的相关基础知识贴在下面

Paint即画笔,可以绘制图形、可以绘制文字,有很多属性设置方法: 
setAntiAlias: 设置画笔的锯齿效果,为true即给该图形或文字打上抗锯齿标志  
setColor: 设置画笔颜色  
setAlpha: 设置Alpha值   
setTextSize: 设置字体尺寸  
setStyle: 设置画笔风格,Paint.Style.STROKE为空心,Paint.Style.FILL为实心  
setStrokeWidth: 设置空心的边框宽度  

Path即路径,在该类中封装了许多几何路径的方法,比如  
moveTo: 改变起始点的位置  
lineTo: 连接某个坐标点  
arcTo: 绘制弧形路线  
addRect: 绘制矩形  
addOval: 绘制椭圆  
addArc: 绘制圆弧  
addCircle: 绘制圆形  
还包括我们要用的二、三阶贝赛尔曲线的方法  
quadTo(float x1, float y1, float x2, float y2):  二阶贝赛尔曲线方法
cubicTo(float x1, float y1, float x2, float y2, float x3, float y3): 三阶贝赛尔曲线的方法  

最后补充两个单词:  
1、quadratic [kwɒ'drætɪk] adj. 平方的、二次的  
2、cubic ['kjuːbɪk] adj. 立方的、三次的

接下来是自定义三阶贝赛尔曲线View的代码


相关的变量

初始化函数

绘制函数

手势触摸管理

这是三阶贝赛尔曲线的代码,如果想看更多代码请移步到我的GitHub上:
GitHub上示例工程In-depthStudy