一起Talk Android吧（第四百二十回：贝塞尔曲线）

Posted 2022-12-10 talk_8

文章目录

• 基本概念
• 绘制方法
• 具体示例

各位看官们，大家好，上一回中咱们说的例子是"让时钟走起来",这一回咱们介绍的例子是"

贝塞尔曲线

"。闲话休提，言归正转，让我们一起Talk android吧！

看官们，我们在前面章回中介绍过如何绘制曲线，当时使用的是路径的效果，比如给路径设置圆角效果就能画出弧线。不过有些曲线无法通过路径效果画出来，这里就可以使用贝塞尔曲线了，它在计算机图形学中经常用来绘图各种曲线。本章回将介绍如何绘制贝塞尔曲线。

基本概念

贝塞尔曲线表示两点之间的一条曲线，曲线的曲率通过位于两点之间的控制点进行控制。我只介绍这些基本的概念，详细的图形演示以及数学公式就不展开介绍了，大家自行查阅就可以。有了这些基本概念后就可以绘制贝塞尔曲线了。

绘制方法

绘制贝塞尔曲线通过Path类来实现，该类提供了两个方法，详细如下：

    public void quadTo(float x1, float y1, float x2, float y2) 
    public void rQuadTo(float dx1, float dy1, float dx2, float dy2) 

quadTo方法有四个参数，它表示两个点的坐标，前两个参数是贝塞尔曲线上控制点的坐标，后两个参数是贝塞尔曲线终点的坐标，这里还缺少一个起点坐标，可以使用Path类的moveTo()方法控制贝塞尔曲线的起点。如果不指定起点，默认使用原点(0,0)当作起点。

rQuardTo方法有四个参数，不过这些参数不代表具体点的坐标，而是表示坐标的偏移量，其中前两个参数表示控制点坐标的偏移量，后两个参数表示终点坐标的偏移量。

具体示例

贝塞尔曲线经常用来绘制一些不规则的曲线，比如树叶，花瓣，水波等，接下来我们通过具体的代码来演示。

    private void drawWave(Canvas canvas) 
//        mPath.reset();
        //画树叶，或者当作眼睛也可以
        /*
        mPath.moveTo(100,200);
        mPath.quadTo(200,100,400,200);
        mPath.quadTo(300,300,100,200);
        mArcPaint.setStyle(Paint.Style.FILL);
         */

        //画心形
        /*
        mPath.moveTo(400,600);
        mPath.quadTo(200,400,400,470);
        mPath.quadTo(600,400,400,600);
         */

        //画水波形形状
        mPath.moveTo(100,300);
        mPath.quadTo(200,200,300,300);
        mPath.quadTo(400,400,500,300);
        mPath.rQuadTo(100,-100,200,0);
        canvas.drawPath(mPath,mArcPaint);

    

上面的代码演示了三种贝塞尔曲线效果，分别是树叶，心形，水波纹。我在这里就不演示具体的效果了，大家可以自己动手去实践。

大家可能不理解代码中的坐标是如何得出的，我的经验是自己动手在纸上画个形状，然后依据形状来确定坐标，起点和终点的坐标与图形的形状有关，图形的弧度与控件点坐标有关。这些坐标中起点和终点相对好计算，控制点的坐标不好计算，这个需要不断地调试才能找到合适的坐标。

看官们，关于Android中"贝塞尔曲线"的例子咱们就介绍到这里，欲知后面还有什么例子，且听下回分解！