一条神奇的贝塞尔曲线及其应用

程序IT圈

学习编程技术，关注这个公众号足够了

 

今天的主题，就是主要和大家介绍贝塞尔曲线！

什么是贝塞尔曲线？

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

贝塞尔曲线的类型

以下公式中：B(t)为t时间下 点的坐标；

P0为起点,Pn为终点,Pi为控制点

一阶贝塞尔曲线(线段)：

二阶贝塞尔曲线(抛物线)：

三阶贝塞尔曲线：

四阶贝塞尔曲线：

五阶贝塞尔曲线：

通用公式：

更多的贝塞尔曲线，大家可以去看一下这个网站，可以自己画点的位置

http://myst729.github.io/bezier-curve/

贝塞尔曲线的应用

可能前面的公式你没有完全看懂，但这并不影响我们的应用 。现在贝塞尔曲线在软件开发中的应用是越来越多了，比如下面这个制作波浪曲线的，就是应用二阶贝塞尔曲线实现的 。

例子参照

https://blog.csdn.net/z82367825/article/details/51599245

如何用Android实现上面的效果图呢？

在Android中Path类中其实是有已经封装好了关于贝塞尔曲线的函数的

//二阶贝赛尔 
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)

quadTo（）方法，可以从源码的注释看出(x1,y1)是控制点坐标，(x2,y2)是终点坐标 

/**
   * Add a quadratic bezier from the last point, approaching control point
   * (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for
   * this contour, the first point is automatically set to (0,0).
   *
   * @param x1 The x-coordinate of the control point on a quadratic curve
   * @param y1 The y-coordinate of the control point on a quadratic curve
   * @param x2 The x-coordinate of the end point on a quadratic curve
   * @param y2 The y-coordinate of the end point on a quadratic curve
   */
  public void quadTo(float x1, float y1, float x2, float y2) {
      isSimplePath = false;
      native_quadTo(mNativePath, x1, y1, x2, y2);
  }

　

原理图：

通过属性动画类ValueAnimator不断改变点1的横坐标，随着点1横坐标向右移动，点2，点3，点4，点5，以及四个控制点的坐标随着点1的移动同时位移相同距离，每一次坐标点更新，我们调用一次invalidate()方法，调用draw重新绘制视图，绘制四段贝塞尔曲线。最后点1移动到原先点3的位置，这样就完成了一次动画。这样，通过循环不断的动画效果，我们就实现了波浪的效果。

关键的onDraw代码如下：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (!mIsRunning || !mHasInit)
            return;
        mPath.reset();
        mPath.moveTo(mLeft1.x, mLeft1.y);
        mPath.quadTo(mControlLeft1.x, mControlLeft1.y, mLeft2.x, mLeft2.y);
        mPath.quadTo(mControlLeft2.x, mControlLeft2.y, mFirst.x, mFirst.y);
        mPath.quadTo(mControlFirst.x, mControlFirst.y, mSecond.x, mSecond.y);
        mPath.quadTo(mControlSecond.x, mControlSecond.y, mRight.x, mRight.y);
        mPath.lineTo(mRight.x, mHeight);
        mPath.lineTo(mLeft1.x, mHeight);
        mPath.lineTo(mLeft1.x, mLeft1.y);
        canvas.drawPath(mPath, mPaint);
    }

如果需要完整的程序代码，可以长按下面的公众号，后台回复：贝塞尔曲线 。

热门阅读：

1. 一大波免费编程视频资源来袭

2. 推荐一个用过都叫好的实用神器

3.个人网站：

程序猿圈 http://www.cxyquan.com/