Android贝塞尔曲线初步学习第一课

概述贝塞尔曲线有一阶、二阶、三阶、N阶一阶就是一条直线，有起点终点，没有控制点，对应方法就是

贝塞尔曲线有一阶、二阶、三阶、N阶

一阶就是一条直线，有起点终点，没有控制点，对应方法就是

canvas.drawline(float startX,float startY,float stopX,float stopY,@NonNull Paint paint) ;

二阶为曲线，有起点终点，一个控制点，对应方法就是

path.quadTo(float x1,float y1,float x2,float y2);

其中x1、y1为控制点坐标， x2、y2为终点坐标，效果如下：

三阶由俩个控制点控制，对应方法就是

path.cubicTo(float x1,float y2,float x3,float y3);

其中x1、y1、x2、y2为两个控制点坐标， x3、y3为终点坐标，效果如下：

做一个demo巩固一下用法：

新建一个SecondBezIErVIEw继承VIEw，重写构造方法、初始化画笔、固定起点和终点的坐标，重写ontouchEvent()方法获取当前点击的点为控制点：

 @OverrIDe public boolean ontouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_MOVE: mControlX = event.getX(); mControlY = event.getY(); invalIDate(); break; } return true; }

在onDraw()方法中画点、画连接线、画文本、画二阶贝塞尔曲线

 @OverrIDe protected voID onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawCircle(mStartX,mStartY,8,mlinePaint); canvas.drawText("起点",mStartX,mlinePaint); canvas.drawCircle(mEndX,mEndY,mlinePaint); canvas.drawText("终点",mEndX,mlinePaint); canvas.drawCircle(mControlX,mControlY,mlinePaint); canvas.drawText("控制点",mControlX,mlinePaint); canvas.drawline(mStartX,mlinePaint); canvas.drawline(mEndX,mlinePaint); mBezIErPath.reset();//因为不断重绘，path的路径也要重置，不然页面上会显示很多条线 mBezIErPath.moveto(mStartX,mStartY);//移至起点 mBezIErPath.quadTo(mControlX,mEndY);//二阶贝塞尔曲线，传入控制点和终点坐标 canvas.drawPath(mBezIErPath,mBezIErPaint); }

最后添加一个回d的动画，用的是OvershootInterpolator插值器，在ontouchEvent的MotionEvent.ACTION_UP中：

 case MotionEvent.ACTION_UP: ValueAnimator animX = ValueAnimator.offloat(mControlX,getWIDth() / 2); animX.setDuration(500); animX.setInterpolator(new OvershootInterpolator()); animX.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @OverrIDe public voID onAnimationUpdate(ValueAnimator animation) { mControlX = (float) animation.getAnimatedValue(); invalIDate(); } }); animX.start(); ValueAnimator animY = ValueAnimator.offloat(mControlY,getHeight() / 2); animY.setDuration(500); animY.setInterpolator(new OvershootInterpolator()); animY.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @OverrIDe public voID onAnimationUpdate(ValueAnimator animation) { mControlY = (float) animation.getAnimatedValue(); invalIDate(); } }); animY.start(); break;

再来个三阶的

主要就是用到了多点触控：

 private boolean mIsSecondPoint = false; @OverrIDe public boolean ontouchEvent(MotionEvent event) { switch (event.getAction() & MotionEvent.ACTION_MASK) {//多点触控 case MotionEvent.ACTION_POINTER_DOWN: mIsSecondPoint = true; break; case MotionEvent.ACTION_POINTER_UP: mIsSecondPoint = false; break; case MotionEvent.ACTION_MOVE: mControlX1 = event.getX(0);//获取控制点1的横纵坐标 mControlY1 = event.getY(0); if (mIsSecondPoint) {  mControlX2 = event.getX(1);//获取控制点2的横纵坐标  mControlY2 = event.getY(1); } invalIDate(); break; } return true; }

然后再onDraw()中画三阶贝塞尔曲线

 mBezIErPath.reset(); mBezIErPath.moveto(mStartX,mStartY); mBezIErPath.cubicTo(mControlX1,mControlY1,mControlX2,mControlY2,mEndY); canvas.drawPath(mBezIErPath,mBezIErPaint);

大功告成，打完收工。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android贝塞尔曲线初步学习第一课全部内容，希望文章能够帮你解决Android贝塞尔曲线初步学习第一课所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。