自定义View绘图篇(三)-贝塞尔曲线

一、简介

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的，贝塞尔曲线是计算机图形学中相当重要的参数曲线。

关于贝赛尔动画效果，我们可以去Bézier Curve和cubic-bezier查看演示。

二、基本使用

关于贝塞尔曲线，在网上也看了很多的知识，在这里只整理做简单的整理。

1、基本原理

一阶贝塞尔曲线

看一个演示：

从图上可以看出，一阶贝塞尔曲线，是由2个顶点P₀和P₁组成，而红色的那条线就各个时间点下不同取值的B(t)所形成的轨迹。

因此，可以理解：一阶贝赛尔曲线就是一个点在这条直线上做匀速运动，即就是公式结果B(_t)随时间变化的路径。

二阶贝塞尔曲线

我们看上面演示

1. 首先我们可以看到Q₀和Q₁，从他们的运动轨迹不难看出，他们是各自控制点上的一节贝塞尔曲线

2. 我们观察他们观察到，Q₀，Q₀、Q₀同时开始运动，同时运动到中点，也同时结束，我们可以得出结论，贝塞尔曲线的运动是按比例的。

2、使用

二阶贝塞尔曲线和三阶贝塞尔曲线基本相同，这里只整理二阶贝塞尔曲线

2.1、二阶贝塞尔曲线

```
//二阶贝赛尔曲线
public void quadTo(float x1, float y1, float x2, float y2)  
public void rQuadTo(float dx1, float dy1, float dx2, float dy2) 
//三阶贝赛尔曲线
public void cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)   
public void rCubicTo(float x1, float y1, float x2, float y2,float x3, float y3) 
```

参数：

• x1,y1：控制点坐标
• x2,y2：终点坐标
• dx1，dy1：控制点坐标，相对上一个控制点位置(相对距离)
• dx2，dy2：终点坐标，相对上一个控制点位置(相对距离)

注意：起始点就是Path当前点所在的坐标

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        path = new Path();
        path.moveTo(50,201);
        path.quadTo(198,40,347,171);
        canvas.drawPath(path,paint);
}

我们可以多次调用quadTo()方法形成更绚丽的图形

最后，关于这部分的实战，会放在动画后面的实战中

七阶贝塞尔曲线