一条神奇的贝塞尔曲线及其应用
程序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);
}如果需要完整的程序代码，可以长按下面的公众号，后台回复：贝塞尔曲线 。
腾讯云开发者
