参考：
https://baike.baidu.com/item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF/1091769?fr=aladdin

1 简介

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

贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。

2 贝塞尔曲线公式

2.1 一阶贝塞尔曲线(线性公式)

一阶贝塞尔曲线公式如下：

$B(t)=(1-t)P_0+t{P}_1,t\in [0,1]$

动画演示:

P0为起点、P1为终点，t表示当前时间，B(t)表示公式的结果值。

注意，曲线的意义就是公式结果B(t)随时间的变化，其取值所形成的轨迹。在动画中，黑色点表示在当前时间t下公式B(t)的取值。而红色的那条线就不在各个时间点下不同取值的B(t)所形成的轨迹。

总而言之：对于一阶贝赛尔曲线，大家可以理解为在起始点和终点形成的这条直线上，匀速移动的点。

2.2 二阶贝塞尔曲线

二阶贝赛尔曲线的公式:

$B(t)=(1-t{)}^2{P}_0+2t(1-t)t{P}_1+t^2{P}_2,t\in [0,1]$

在这里P0是起始点,P2是终点，P1是控制点 。

假设将时间定在t=0.25的时刻，此时的状态如下图所示：

首先，P0点和P1点形成了一条贝赛尔曲线，还记得我们上面对一阶贝赛尔曲线的总结么：就是一个点在这条直线上做匀速运动；所以P0-P1这条直线上的移动的点就是Q0；

同样，P1,P2形成了一条一阶贝赛尔曲线，在这条一阶贝赛尔曲线上，它们的随时间移动的点是Q1 。最后，动态点Q0和Q1又形成了一条一阶贝赛尔曲线，在它们这条一阶贝赛尔曲线动态移动的点是B 。而B的移动轨迹就是这个二阶贝赛尔曲线的最终形态。从上面的讲解大家也可以知道，之所以叫它二阶贝赛尔曲线是因为，B的移动轨迹是建立在两个一阶贝赛尔曲线的中间点Q0,Q1的基础上的。

今天给大家介绍的是贝塞尔曲线，什么是贝塞尔曲线呢？就是一个叫贝塞尔的人，发现了这个东西，然后就以他的名字命名为贝塞尔曲线，就像司马光砸缸一样，人家为啥要叫司马光砸缸，不叫小明砸缸小马砸缸呢？明明是司马光砸的刚功劳不能被别人抢走呀，好了好了这100多字都是废话，因为我在别的博客看的太多了，粘贴过来是真没意思。直接看效果上代码给大家介绍喽。

效果图(1.1)：

咱们先来看一阶贝塞尔曲线:

一阶贝塞尔曲线

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //一阶贝塞尔曲线
        initOneStage(canvas);
    }
	/**
     * 一阶贝塞尔曲线
     */
    private void initOneStage(Canvas canvas) {
        //一阶贝塞尔曲线
        paint.setColor(Color.RED);
        path.moveTo(50, 50);
        path.lineTo(100, 150);
        canvas.drawPath(path, paint);
        path.reset();//重置
    }

效果图(1.2):

一阶贝塞尔曲线最好理解,一个起始点,一个结束点,

• 起始点moveTo()
• 结束点 lineTo()

然后直接绘制即可,这里就不啰嗦了

二阶贝塞尔曲线

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        //二阶贝塞尔曲线
        initTwoStage(canvas);
    }
    
 private void initTwoStage(Canvas canvas) {
        /**
         * 二阶贝塞尔曲线
         * 起始点:100*500
         * 控制点   (float)towBean.TowControlPointX * (float)towBean.TowControlPoinY,
         * 结束点  1000,500)
         */
//        起始点
        paint.setColor(Color.RED);
        path.moveTo(100, 500);
        //x1控制点x y1控制点y   x2结束点x y2结束点y
        path.quadTo(
                (float) towBean.TowControlPointX,
                (float) towBean.TowControlPoinY,
                1000,
                500);
        canvas.drawPath(path, paint);
        path.reset();//重置


        //二阶贝塞尔曲线 辅助线
        paint.setColor(Color.BLACK);
        path.moveTo(100, 500);
        path.lineTo((float) towBean.TowControlPointX, (float) towBean.TowControlPoinY);
        path.lineTo(1000, 500);
        canvas.drawPath(path, paint);


        //二阶贝塞尔圆
        path.reset();//重置
        paint.setColor(Color.YELLOW);
        canvas.drawCircle((float) towBean.TowControlPointX, (float) towBean.TowControlPoinY, 10, paint);
        canvas.drawPath(path, paint);
        path.reset();//重置
    }

效果图(1.3):

• 红色的为贝塞尔曲线
• 黑色的为辅助线
• 黄色的为辅助圆点

在来看这张图:

示例图(2.1):

给大家讲一下这段代码的逻辑是什么,底部会给出完整代码,这里主要说的是原理,重点不是代码:

通过onTouchEvent()来监听当前屏幕坐标,通过和黄色的圆判断是否选中,若选中,则移动控制点,(起始点,和结束点是写死的)达到都移动的效果

学习过PS的朋友应该会熟悉一些,photoshop中的钢笔工具就是这个原理,我也学习过一个月的时间,还记得当时我教我们班一个女同学,她死活是学不会,如果她看到我这篇文章是不是得开心坏了,哈哈哈,继续说今天的这篇文章,不好意思,跑题了~~~

示例图(2.2):

当AD : AB = BE :BC 时DE上会生成一点,这个曲线就是通过E这个点和开始点,结束点来规划的

通过控制点来控制曲线的弧度等,比较抽象,在网上找个图大家康康:

网络图(3.1):

现在就一目了然了吧:

在来看看我写的效果,移动控制点来改变弧度:

现在是不是思路有点清晰了~

在来看看三阶贝塞尔曲线

三阶贝塞尔曲线:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        //三阶段贝塞尔曲线
        initThree(canvas);
    }
    
  /**
     * 三阶贝塞尔曲线
     *
     * @param canvas
     */
    private void initThree(Canvas canvas) {
        /**
         * 三阶贝塞尔曲线
         * 开始点为100*1000
         * 结束点为1000*1000
         * 控制点1为: (float) threeBean.ThreeControlPointX1,(float) threeBean.ThreeControlPointY1,
         * 控制点2位 (float) threeBean.ThreeControlPointX2,(float) threeBean.ThreeControlPointY2,
         */

        paint.setColor(Color.RED);
        path.moveTo(100, 1000);//起始点
        path.cubicTo((float) threeBean.ThreeControlPointX1, (float) threeBean.ThreeControlPointY1,//控制点1
                (float) threeBean.ThreeControlPointX2, (float) threeBean.ThreeControlPointY2,//控制点2
                1000, 1000);//结束点
        canvas.drawPath(path, paint);
        path.reset();//重置


        //绘制三阶段贝塞尔辅助线
        paint.setColor(Color.BLACK);
        path.moveTo(100, 1000);//起始点
        path.lineTo((float) threeBean.ThreeControlPointX1, (float) threeBean.ThreeControlPointY1);
        path.lineTo((float) threeBean.ThreeControlPointX2, (float) threeBean.ThreeControlPointY2);
        path.lineTo(1000, 1000);//结束点
        canvas.drawPath(path, paint);


        //绘制贝塞尔三阶圆点
        paint.setColor(Color.YELLOW);
        canvas.drawCircle((float) threeBean.ThreeControlPointX1, (float) threeBean.ThreeControlPointY1, 10, paint);
        canvas.drawCircle((float) threeBean.ThreeControlPointX2, (float) threeBean.ThreeControlPointY2, 10, paint);

    }

效果图(1.4)
:

• 红色的为贝塞尔三阶曲线
• 黄色的为辅助圆点
• 黑色的线为辅助线
  
  三阶贝塞尔曲线和二阶贝塞尔曲线唯一不同的就是三阶比二阶多了一个控制点而已

网络图(3.2)

当AE:AB= BF:BC= CG:CD= EH:EF= FI:FG= HJ:HI，点 J 就是最终得到的贝塞尔曲线上的一个点。然后通过起始点A,结束点D和J这个点来绘制曲线.可能大家听得有点迷惑,网上找了一张图大家看看吧;

网络图(3.3)

P0就是起始点
P1就是控制点1
P2就是控制点2
P3就是结束点

蓝色线中间的黑点,就是上边说的点J,从P0-- >P3的过程就是贝塞尔三阶曲线

在来看看我写的代码,通过移动控制点1,和控制点2来控制贝塞尔三阶曲线:

补充:

在Android中Path()已经提供了贝塞尔曲线的方法:

二阶贝塞尔曲线:

Path path = new Path();

 path.moveTo(起始点x, 起始点y);
        //x1控制点x y1控制点y   x2结束点x y2结束点y
        path.quadTo(x1, y1, x2, y2);

三阶贝塞尔曲线:

Path path = new Path();

 path.moveTo(起始点x, 起始点y);//起始点
 //x1 y1 控制点1   x2,y2控制点2  x3,y3结束点
path.cubicTo(x1,y1,x2,y2,x3,y3);

最后在来看看其他阶的贝塞尔曲线吧~

四阶贝塞尔曲线:

五阶贝塞尔曲线:

每多一阶只是多了一个控制点而已!

完整代码

猜你喜欢:

Android 贝塞尔曲线获取运动轨迹

原创不易,您的点赞就是对我最大的支持哦~留下您的点赞吧!