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

2018-10-15  本文已影响0人  Active_Loser

一、简介

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

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

二、基本使用

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

1、基本原理

一阶贝塞尔曲线

看一个演示:


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

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

二阶贝塞尔曲线

我们看上面演示

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

  2. 我们观察他们观察到,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) 
```

参数:

注意:起始点就是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()方法形成更绚丽的图形

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

七阶贝塞尔曲线
上一篇 下一篇

猜你喜欢

热点阅读