android 贝塞尔曲线点击区域,Android贝塞尔曲线——曲线进阶

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

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

什么是贝塞尔三阶？##

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

三阶贝塞尔曲线

上图就是三阶贝塞尔曲线的基本形态，是不是比二阶多出了一个控制点。那么我们继续来看一下它的动态绘制过程吧！

动态贝塞尔三阶曲线

可见，三阶贝塞尔曲线从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到布局这段代码了。

三阶贝塞尔曲线效果图

这个样子我能做出来你们也一定可以哦，Duang！

duang

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

废话不说了，直接上代码!

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;

private boolean isPointDown; // 手指是否按下

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);

}

@Override

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction() & MotionEvent.ACTION_MASK) {

case MotionEvent.ACTION_POINTER_DOWN:

isPointDown = true;

break;

case MotionEvent.ACTION_POINTER_UP:

isPointDown = false;

break;

case MotionEvent.ACTION_MOVE:

conOneXPoint = event.getX(0);

conOneYPoint = event.getY(0);

if (isPointDown) {

conTwoXPoint = event.getX(1);

conTwoYPoint = event.getY(1);

}

invalidate();

break;

}

return true;

}

}

我们两个手指一起操作来对贝塞尔三阶曲线进行各种男人的撕扯吧！我不知道使用什么东西来录制屏幕，只能给大家上一张经过我拉扯后的图。

贝塞尔曲线图

好了，这次这篇就到这里吧，请大家继续关注我，以后还会去更新贝塞尔曲线的文章。

题外话：如果谁知道用什么软件可以录制手机屏幕并生成gif图的可以在下方留言。 哈哈，好的我们下期再见。