Canvas贝塞尔曲线绘制
宁从直中来，不从曲中求，虽然直线应用不少，但曲线亦然。在Path类说明的部分，咱们就聊到其主要做用是用来描述直线段，二次曲线及三次曲线所组成的复合几何路径，在前面咱们已经了解到了直线段组合的描述方法而且进行了简单应用，接下来一块儿来看下曲线的复合路径描述。web
贝塞尔曲线简介
在正式编码前，咱们首先来了解下什么是贝塞尔曲线，贝塞尔曲线由起始点，终点及控制点三种元素构成，经过改变控制点的位置，贝塞尔曲线的形状会发生变化。canvas
以二阶贝塞尔曲线为例说明曲线造成过程：c#
步骤一：在平面内选三个不一样的点并依次链接，以下图所示：微信
步骤二：在AB及BC线段上分别寻找点D和E，使得AD/AB = CE/CB，以下图：ide
DE
，在
DE
上寻找点
F
，使得
DF
/
DE
=
AD
/
AB
=
BE
/
BC
，以下图：
P0
，
P1
，
P2
这三个点坐标便可，其中
P1
被称为控制点。
二阶贝塞尔曲线绘制
咱们以OFO App里面的黄色背景，为你们演示下二阶贝塞尔曲线的绘制函数
BC
为
View
宽度，能够经过
getRight()
-
getLeft()
获得，
View
高度能够经过
getBottom()
-
getTop()
得到，取
A‘
位于
View
高度的十分之一处，则
A'
的坐标为(
getLeft()
,
getTop()
+(
View
高度)/10),同理
D‘
坐标为(
getLeft()
+(
View
宽度),
getTop()
+(
View
高度)/10),取
BC
中线与
AD
交点上
View
高度十分之一处为控制点，则控制点坐标为(
getLeft()``+View
宽度/2,
getTop()
-
View
高度/10),进而咱们能够获得绘制代码以下：
Path path = new Path();
//选取整个View的宽高绘制背景
path.moveTo(getLeft(), getTop()+(getBottom()-getTop())/10);
//绘制A'D'，控制点在AD平分线上，quadTo函数的前两个值为控制点的x，y坐标，后两个值为终点坐标
path.quadTo(getLeft()+(getRight()-getLeft())/2 , getTop()-(getBottom()-getTop())/10,getRight() , getTop()+(getBottom()-getTop())/10);
//绘制D'C
path.lineTo(getRight(), getBottom());
//绘制CB
path.lineTo(getLeft(), getBottom());
//闭合曲线，自动绘制BA'
path.close();
运行后效果：flex
View
宽高的方法，因此暂时用已知方法获取数据。
三阶贝塞尔曲线绘制
三阶贝塞尔曲线有两个控制点，咱们取(0,0)点为起点，(600,500)为终点，(100,500)和(600,50)为控制点，绘制一条贝塞尔曲线，代码以下：编码
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Path path = new Path();
path.cubicTo(100,500,600,50,600,500);
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLUE);
paint.setStrokeWidth(20);
canvas.drawPath(path,paint);
}
运行效果：url
往期推荐spa
本文分享自微信公众号 - 小海编码日记（gh_1f87b8c00ede）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。