内容分享-->

Hello，大家好，今天我的题目是Android贝塞尔曲线——曲线进阶，那么为什么叫做进阶呢？那当然是之前我写过初级的内容咯，没有读过的小伙伴可以点击 Android贝塞尔曲线——曲线初体验 来进行查看。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

今天来进阶一下曲线，上次我为大家带来的是贝塞尔曲线的初级实现，也就是二阶贝塞尔曲线，今天我想为大家说一下三阶贝塞尔曲线，其实也是非常简单的。我的目标是为大家带来最干的货。辣么，我们开始吧！

什么是贝塞尔3阶？

那么有人要问了，什么是贝塞尔三阶曲线呢，他与二阶曲线有什么不同？我也不知道这个有人是哪位，不过他问的问题总是这么的犀利。。那么我来回答一下。众所周知，贝塞尔曲线二阶是由一个起点、一个控制点、一个终点来构成，那么三阶自然就是多出了一个控制点。 文字总是这么苍白无力，还是来看图吧！

可见，三阶贝塞尔曲线从P0点经过P1、P2两个控制点最后到P3的终点完成了这条曲线的绘制。

撸码时间

那么我们开始正式的撸码，首先创建一个BezierThiredView 让他继承View，如我下面的代码。

public class BezierThiredView extends View {     // 开始坐标     private float startXPoint;     private float startYPoint;     // 结束坐标     private float endXPoint;     private float endYPoint;     // 两个控制点     private float conOneXPoint;     private float conOneYPoint;     private float conTwoXPoint;     private float conTwoYPoint;     // 画笔、路径     private Path mPath;     private Paint mPaint;     private Paint mPaintCon;     private Paint mPaintText;     public BezierThiredView(Context context) {         super(context);     }     public BezierThiredView(Context context, AttributeSet attrs) {         super(context, attrs);         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);         mPaint.setStyle(Paint.Style.STROKE);         mPaint.setColor(Color.RED);         mPaint.setStrokeWidth(8);         mPaintCon = new Paint(Paint.ANTI_ALIAS_FLAG);         mPaintCon.setStyle(Paint.Style.STROKE);         mPaintCon.setStrokeWidth(3);         mPaintText = new Paint(Paint.ANTI_ALIAS_FLAG);         mPaintText.setStyle(Paint.Style.STROKE);         mPaintText.setTextSize(20);     }     @Override     protected void onSizeChanged(int w, int h, int oldw, int oldh) {         super.onSizeChanged(w, h, oldw, oldh);         startXPoint = w / 4;         startYPoint = h / 2;         endXPoint = w * 3 / 4;         endYPoint = h / 2;         conOneXPoint = w / 2 - 100;         conOneYPoint = h / 2 - 400;         conTwoXPoint = w / 2 + 100;         conTwoYPoint = h / 2 - 400;         mPath = new Path();     }     public BezierThiredView(Context context, AttributeSet attrs, int defStyleAttr) {         super(context, attrs, defStyleAttr);     }     @Override     protected void onDraw(Canvas canvas) {         super.onDraw(canvas);         mPath.reset();         mPath.moveTo(startXPoint,startYPoint);         mPath.cubicTo(conOneXPoint,conOneYPoint,conTwoXPoint,conTwoYPoint,endXPoint,endYPoint);         canvas.drawPoint(startXPoint,startYPoint,mPaintCon);         canvas.drawText("P0",startXPoint-50,startYPoint,mPaintText);         canvas.drawPoint(endXPoint,endYPoint,mPaintCon);         canvas.drawText("P3",endXPoint+50,endYPoint,mPaintText);         canvas.drawPoint(conOneXPoint, conOneYPoint,mPaintCon);         canvas.drawText("P1", conOneXPoint-50, conOneYPoint,mPaintText);         canvas.drawPoint(conTwoXPoint, conTwoYPoint,mPaintCon);         canvas.drawText("P2", conTwoXPoint+50, conTwoYPoint,mPaintText);         canvas.drawLine(startXPoint,startYPoint, conOneXPoint, conOneYPoint,mPaintCon);         canvas.drawLine(conOneXPoint, conOneYPoint,conTwoXPoint,conTwoYPoint,mPaintCon);         canvas.drawLine(conTwoXPoint, conTwoYPoint,endXPoint,endYPoint,mPaintCon);         canvas.drawPath(mPath,mPaint);     } }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

跟着我上面代码就可以画出一条三阶贝塞尔曲线，其中path.cubicTo是系统提供给我们绘制三阶曲线的专用方法，我们来把他放到布局中来运行一下看看效果，这里我就省略添加自定义view到布局这段代码了。

为了节省篇幅我也把辅助线一并画出来，下面我要带大家实现一下拖拽效果。