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

Canvas贝塞尔曲线绘制

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

贝塞尔曲线简介

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

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

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

步骤二：在AB及BC线段上分别寻找点D和E，使得AD/AB = CE/CB，如下图：

二阶贝塞尔曲线绘制

我们以OFO App里面的黄色背景，为大家演示下二阶贝塞尔曲线的绘制

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();

运行后效果：

三阶贝塞尔曲线绘制

三阶贝塞尔曲线有两个控制点，我们取(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);
}

运行效果：