一、简介
贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的,贝塞尔曲线是计算机图形学中相当重要的参数曲线。
关于贝赛尔动画效果,我们可以去Bézier Curve和cubic-bezier查看演示。
二、基本使用
关于贝塞尔曲线,在网上也看了很多的知识,在这里只整理做简单的整理。
1、基本原理
一阶贝塞尔曲线
看一个演示:
从图上可以看出,一阶贝塞尔曲线,是由2个顶点P0和P1组成,而红色的那条线就各个时间点下不同取值的B(t)所形成的轨迹。
因此,可以理解:一阶贝赛尔曲线就是一个点在这条直线上做匀速运动,即就是公式结果B(t)随时间变化的路径。
二阶贝塞尔曲线
我们看上面演示
首先我们可以看到Q0和Q1,从他们的运动轨迹不难看出,他们是各自控制点上的一节贝塞尔曲线
我们观察他们观察到,Q0,Q0、Q0同时开始运动,同时运动到中点,也同时结束,我们可以得出结论,贝塞尔曲线的运动是按比例的。
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) //rQuadTo 左边值可为负值
//三阶贝赛尔曲线
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()方法形成更绚丽的图形
最后,关于这部分的实战,会放在动画后面的实战中