// 贝赛尔曲线成员变量(起始点，控制（操作点），终止点，3点坐标) 
private int startX,startY,controlX,controlY,endX,endY; 
// Path 
private Path path; 
// 为了不影响主画笔，这里绘制贝赛尔曲线单独用一个新画笔 
private Paint paintQ; 
// 随机库（让贝赛尔曲线更明显） 
private Random random; 

/** 
 * SurfaceView初始化函数 
 */ 
public MySurfaceView(Context context) { 
 super(context); 
 ... 
  //贝赛尔曲线相关初始化 
  path = new Path(); 
  paintQ = new Paint(); 
  paintQ.setAntiAlias(true); 
  paintQ.setStyle(Style.stroke); 
  paintQ.setstrokeWidth(5); 
  paintQ.setColor(Color.WHITE); 
  random = new Random(); 
 ... 
} 

/** 
 * 绘制贝赛尔曲线 
 * 
 * @param canvas 主画布 
 */ 
public void drawQpath(Canvas canvas) { 
 path.reset();// 重置path 
 // 贝赛尔曲线的起始点 
 path.moveto(startX,startY); 
 // 设置贝赛尔曲线的操作点以及终止点 
 path.quadTo(controlX,endY); 
 // 绘制贝赛尔曲线（Path） 
 canvas.drawPath(path,paintQ); 
} 

/** 
 * 触屏事件监听 
 */ 
@Override 
public boolean onTouchEvent(MotionEvent event) { 
 endX = (int) event.getX(); 
 endY = (int) event.getY(); 
 return true; 
} 
/** 
 * 游戏逻辑 
 */ 
private void logic() { 
 if (endX != 0 && endY != 0) { 
  // 设置操作点为线段x/y的一半 
  controlX = random.nextInt((endX - startX) / 2); 
  controlY = random.nextInt((endY - startY) / 2); 
 } 
} 

package com.qpath; 
import java.util.Random; 
import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.graphics.Paint.Style; 
import android.graphics.Path; 
import android.view.KeyEvent; 
import android.view.MotionEvent; 
import android.view.SurfaceHolder; 
import android.view.SurfaceHolder.Callback; 
import android.view.SurfaceView; 
/** 
 * 赛贝尔曲线 
 * @author Himi 
 * 
 */ 
public class MySurfaceView extends SurfaceView implements Callback,Runnable { 
 private SurfaceHolder sfh; 
 private Paint paint; 
 private Thread th; 
 private boolean flag; 
 private Canvas canvas; 
 public static int screenW,screenH; 
 // -----------以上是SurfaceView游戏框架 
 // 贝赛尔曲线成员变量(起始点，控制（操作点），终止点，3点坐标) 
 private int startX,endY; 
 // Path 
 private Path path; 
 // 为了不影响主画笔，这里绘制贝赛尔曲线单独用一个新画笔 
 private Paint paintQ; 
 // 随机库（让贝赛尔曲线更明显） 
 private Random random; 
 /** 
  * SurfaceView初始化函数 
  */ 
 public MySurfaceView(Context context) { 
  super(context); 
  sfh = this.getHolder(); 
  sfh.addCallback(this); 
  paint = new Paint(); 
  paint.setColor(Color.WHITE); 
  paint.setAntiAlias(true); 
  setFocusable(true); 
  // -----------以上是SurfaceView游戏框架 
  //贝赛尔曲线相关初始化 
  path = new Path(); 
  paintQ = new Paint(); 
  paintQ.setAntiAlias(true); 
  paintQ.setStyle(Style.stroke); 
  paintQ.setstrokeWidth(5); 
  paintQ.setColor(Color.WHITE); 
  random = new Random(); 
 } 
 /** 
  * SurfaceView视图创建，响应此函数 
  */ 
 public void surfaceCreated(SurfaceHolder holder) { 
  screenW = this.getWidth(); 
  screenH = this.getHeight(); 
  flag = true; 
  // 实例线程 
  th = new Thread(this); 
  // 启动线程 
  th.start(); 
  // -----------以上是SurfaceView游戏框架 
 } 
 /** 
  * 游戏绘图 
  */ 
 public void myDraw() { 
  try { 
   canvas = sfh.lockCanvas(); 
   if (canvas != null) { 
    canvas.drawColor(Color.BLACK); 
    // -----------以上是SurfaceView游戏框架 
    drawQpath(canvas); 
   } 
  } catch (Exception e) { 
   // Todo: handle exception 
  } finally { 
   if (canvas != null) 
    sfh.unlockCanvasAndPost(canvas); 
  } 
 } 
 /** 
  * 绘制贝赛尔曲线 
  * 
  * @param canvas 主画布 
  */ 
 public void drawQpath(Canvas canvas) { 
  path.reset();// 重置path 
  // 贝赛尔曲线的起始点 
  path.moveto(startX,startY); 
  // 设置贝赛尔曲线的操作点以及终止点 
  path.quadTo(controlX,endY); 
  // 绘制贝赛尔曲线（Path） 
  canvas.drawPath(path,paintQ); 
 } 
 /** 
  * 触屏事件监听 
  */ 
 @Override 
 public boolean onTouchEvent(MotionEvent event) { 
  endX = (int) event.getX(); 
  endY = (int) event.getY(); 
  return true; 
 } 
 /** 
  * 游戏逻辑 
  */ 
 private void logic() { 
  if (endX != 0 && endY != 0) { 
   // 设置操作点为线段x/y的一半 
   controlX = random.nextInt((endX - startX) / 2); 
   controlY = random.nextInt((endY - startY) / 2); 
  } 
 } 
 /** 
  * 按键事件监听 
  */ 
 @Override 
 public boolean onKeyDown(int keyCode,KeyEvent event) { 
  return super.onKeyDown(keyCode,event); 
 } 
 public void run() { 
  while (flag) { 
   long start = System.currentTimeMillis(); 
   myDraw(); 
   logic(); 
   long end = System.currentTimeMillis(); 
   try { 
    if (end - start < 50) { 
     Thread.sleep(50 - (end - start)); 
    } 
   } catch (InterruptedException e) { 
    e.printstacktrace(); 
   } 
  } 
 } 
 /** 
  * SurfaceView视图状态发生改变，响应此函数 
  */ 
 public void surfaceChanged(SurfaceHolder holder,int format,int width,int height) { 
 } 
 /** 
  * SurfaceView视图消亡时，响应此函数 
  */ 
 public void surfaceDestroyed(SurfaceHolder holder) { 
  flag = false; 
 } 
} 

/**
 * Created by Administrator on 2015/9/17.
 */
public class MyPathView extends View {
private int height;
private int width;
private Path path;//路径
private Paint mPaint;
private Paint mPaintpoint;
private int count;
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what) {
case 0x23://这应该写一个static final的变量
count++;
if (count < 80) {//形成循环，因为波浪线是两段40所以一个周期80
                        setCount(count);
handler.sendEmptyMessageDelayed(0x23, 20);
                    } else {
count = 0;
handler.sendEmptyMessageDelayed(0x23, 20);
                    }
break;
            }

        }
    };

public void setCount(int count) {
this.count = count;
        invalidate();
    }

public MyPathView(Context context) {
super(context);
    }

public MyPathView(Context context, AttributeSet attrs) {
super(context, attrs);
path = new Path();
mPaint = new Paint();
mPaintpoint = new Paint();
mPaintpoint.setStrokeWidth(10);
mPaintpoint.setColor(Color.YELLOW);
mPaint.setAntiAlias(true);
mPaint.setTextSize(50);
mPaint.setStyle(Paint.Style.STROKE);
handler.sendEmptyMessage(0x23);//
    }

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

path.reset();
path.moveTo(count, 100);
for (int i = 0; i < 10; i++) {
path.rQuadTo(20, 10, 40, 0);//以（count=0，100）为原点开始画，控制点、结束点
path.rQuadTo(20, -10, 40, 0);//以（40，0）为原点开始画，形成一个类似余弦的波浪周期
        }
        canvas.drawPath(path, mPaint);
使用quadTo绘制曲线
//      path.moveTo(100, 100);
//        path.quadTo(100, 400, 300, 300);//控制点终点
//        canvas.drawPoint(100,100,mPaintpoint);//起点
//        canvas.drawPoint(100,400,mPaintpoint);//控制点
//        canvas.drawPoint(300,300,mPaintpoint);//终点
}
}

• Android使用贝塞尔曲线画心形
• Android自定义View绘制贝塞尔曲线的方法
• Android贝塞尔曲线实现加入购物车抛物线动画
• Android自定义view贝塞尔曲线
• android实现贝塞尔曲线之波浪效果
• Android通过交互实现贝塞尔曲线的绘制
• Android 贝塞尔曲线绘制一个波浪球
• android贝塞尔曲线实现波浪效果
• Android自定义View绘制贝塞尔曲线实现流程

目录

• 前言
• 获取触控位置
• 交互绘制实现
• 绘制代码
• 运行效果
• 总结

const Listener({
  Key? key,
  this.onPointerDown,
  this.onPointerMove,
  this.onPointerUp,
  this.onPointerHover,
  this.onPointerCancel,
  this.onPointerSignal,
  this.behavior = HitTestBehavior.deferToChild,
  Widget? child,
}) 

Listener(
  onPointerUp: ((event) {
    print(''position: ${event.localPosition}'');
  }),
  behavior: HitTestBehavior.opaque,
  child: ...
),

void drawCurves(Canvas canvas, Paint paint, List<Offset> points) {
    if (points.length <= 1) {
      return;
    }
    if (points.length == 2) {
      canvas.drawLine(points[0], points[1], paint);
      return;
    }
    if (points.length == 3) {
      _draw2OrderBezierCurves(canvas, paint, points);
      return;
    }
    if (points.length == 4) {
      _draw3OrderBezierCurves(canvas, paint, points);
      return;
    }
    var subPoints = points.sublist(0, 4);
    drawCurves(canvas, paint, subPoints);
    drawCurves(canvas, paint, points.sublist(3));
}

floatingActionButton: IconButton(
  onPressed: () {
    if (points.isNotEmpty) {
      points.removeLast();
      setState(() {});
    }
  },
  icon: Icon(
    Icons.backspace,
    color: Colors.blue,
  ),
),

class GestureBezierDemo extends StatefulWidget {
  GestureBezierDemo({Key? key}) : super(key: key);

  @override
  State<GestureBezierDemo> createState() => _GestureBezierDemoState();
}

class _GestureBezierDemoState extends State<GestureBezierDemo> {
  var points = <Offset>[];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Listener(
        onPointerUp: ((event) {
          points.add(event.localPosition);
          setState(() {});
        }),
        behavior: HitTestBehavior.opaque,
        child: CustomPaint(
          foregroundPainter: GestureBezierPainter(points: points),
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Color(0xFFF5F5F5),
          ),
        ),
      ),
      floatingActionButton: IconButton(
        onPressed: () {
          if (points.isNotEmpty) {
            points.removeLast();
            setState(() {});
          }
        },
        icon: Icon(
          Icons.backspace,
          color: Colors.blue,
        ),
      ),
    );
  }
}

class GestureBezierPainter extends CustomPainter {
  GestureBezierPainter({required this.points});
  final List<Offset> points;
  @override
  void paint(Canvas canvas, Size size) {
    print(size);
    canvas.drawColor(Color(0xFFF1F1F1), BlendMode.color);
    var paint = Paint()..color = Color(0xFFE53020);
    paint.strokeWidth = 2.0;
    paint.style = PaintingStyle.stroke;
    for (var point in points) {
      canvas.drawCircle(point, 2.0, paint);
    }
    paint.color = Color(0xFF2480F0);
    drawCurves(canvas, paint, points);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }

  void drawCurves(Canvas canvas, Paint paint, List<Offset> points) {
    if (points.length <= 1) {
      return;
    }
    if (points.length == 2) {
      canvas.drawLine(points[0], points[1], paint);
      return;
    }
    if (points.length == 3) {
      _draw2OrderBezierCurves(canvas, paint, points);
      return;
    }
    if (points.length == 4) {
      _draw3OrderBezierCurves(canvas, paint, points);
      return;
    }
    var subPoints = points.sublist(0, 4);
    drawCurves(canvas, paint, subPoints);
    drawCurves(canvas, paint, points.sublist(3));
  }

  _draw3OrderBezierCurves(Canvas canvas, Paint paint, List<Offset> points) {
    assert(points.length == 4);
    var yGap = 60.0;
    var path = Path();
    path.moveTo(points[0].dx, points[0].dy);
    for (var t = 1; t <= 100; t += 1) {
      var curvePoint = BezierUtil.get3OrderBezierPoint(
          points[0], points[1], points[2], points[3], t / 100.0);

      path.lineTo(curvePoint.dx, curvePoint.dy);
    }
    canvas.drawPath(path, paint);
  }

  _draw2OrderBezierCurves(Canvas canvas, Paint paint, List<Offset> points) {
    assert(points.length == 3);
    var path = Path();
    path.moveTo(points[0].dx, points[0].dy);
    for (var t = 1; t <= 100; t += 1) {
      var curvePoint = BezierUtil.get2OrderBezierPoint(
          points[0], points[1], points[2], t / 100.0);

      path.lineTo(curvePoint.dx, curvePoint.dy);
    }
    canvas.drawPath(path, paint);
  }
}

• Android使用贝塞尔曲线画心形
• Android自定义View绘制贝塞尔曲线的方法
• Android贝塞尔曲线实现加入购物车抛物线动画
• Android用Canvas绘制贝塞尔曲线
• Android自定义view贝塞尔曲线
• android实现贝塞尔曲线之波浪效果
• Android 贝塞尔曲线绘制一个波浪球
• android贝塞尔曲线实现波浪效果
• Android自定义View绘制贝塞尔曲线实现流程