View绘制系列(8)-Canvas贝塞尔曲线绘制

原创
2020/10/19 10:02
阅读数 110

Canvas贝塞尔曲线绘制

宁从直中来,不从曲中求,虽然直线应用很多,但曲线亦然。在Path类说明的部分,我们就聊到其主要作用是用来描述直线段,二次曲线及三次曲线所组成的复合几何路径,在前面我们已经了解到了直线段组合的描述方法并且进行了简单应用,接下来一起来看下曲线的复合路径描述。

贝塞尔曲线简介

在正式编码前,我们首先来了解下什么是贝塞尔曲线,贝塞尔曲线由起始点,终点及控制点三种元素构成,通过改变控制点的位置,贝塞尔曲线的形状会发生变化。

以二阶贝塞尔曲线为例说明曲线形成过程:

步骤一:在平面内选三个不同的点并依次连接,如下图所示:

步骤二:在ABBC线段上分别寻找点DE,使得AD/AB = CE/CB,如下图:

步骤三: 连接 DE ,在 DE 上寻找点 F ,使得 DF / DE = AD / AB = BE / BC ,如下图:


步骤四: 重复步骤2到3,得到的所有F点依次连接起来就构成了我们的二阶贝塞尔曲线,在实际绘制中我们只需要确定 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();

运行后效果:

由于我们还没有讲到获取 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);
}

运行效果:

如果我们不指定Paint的Style为STROKE,则默认为FILL,绘制效果如下:


往期推荐

View绘制系列(1)-View简介

OpenCV SDK下载及Android Java环境搭建


本文分享自微信公众号 - 小海编码日记(gh_1f87b8c00ede)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部