const CustomPainter({ Listenable? repaint }) : _repaint = repaint;

class TouchController extends ChangeNotifier {
  List<Offset> _points = []; //點集合
  int _selectIndex = -1;// 選中的點 更新位置用

  int get selectIndex => _selectIndex;

  List<Offset> get points => _points;

  // 選擇某一個點 保存index
  set selectIndex(int value) {
    if (_selectIndex == value) return;
    _selectIndex = value;
    notifyListeners();// 通知刷新
  }
   // 選中的點標記
  Offset? get selectPoint => _selectIndex == -1 ? null : _points[_selectIndex];

  // 添加一個點
  void addPoint(Offset point) {
    points.add(point);
    notifyListeners();
  }
   // 手指移動時更新當前點的位置
  void updatePoint(int index, Offset point) {
    points[index] = point;
    notifyListeners();
  }
    // 刪除最后一個點 相當于撤回上一步操作
  void removeLast() {
    points.removeLast();
    notifyListeners();
  }

}

 GestureDetector(
  child: CustomPaint(
    painter:
        _DolphinPainter(widget.touchController, widget.image),
  ),
  onPanDown: (d) {
    // 按壓
    judgeZone(d.localPosition);
  },
  onPanUpdate: (d) {
    // 移動
    if (widget.touchController.selectIndex != -1) {
      widget.touchController.updatePoint(
          widget.touchController.selectIndex, d.localPosition);
    }
  },
)
///判斷出是否在某點的半徑為r圓范圍內(nèi)
bool judgeCircleArea(Offset src, Offset dst, double r) =>
    (src - dst).distance <= r;
///手指按下觸發(fā)
void judgeZone(Offset src) {
  /// 循環(huán)所有的點
  for (int i = 0; i < widget.touchController.points.length; i++) {
    // 判斷手指按的位置有沒有按過的點
    if (judgeCircleArea(src, widget.touchController.points[i], 20)) {
      // 有點 不添加更新選中的點
      widget.touchController.selectIndex = i;
      return;
    }
  }
  // 無點 添加新的點 并將選中的點清空
  widget.touchController.addPoint(src);
  widget.touchController.selectIndex = -1;
}

class _DolphinPainter extends CustomPainter {
  final TouchController touchController;// 存儲數(shù)據(jù)類
//  final ui.Image image;

  _DolphinPainter(this.touchController, this.image)
    // 這個地方傳入需要更新的 Listenable
      : super(repaint: touchController);

  List<Offset>? pos; //存儲手勢按壓的點

  @override
  void paint(Canvas canvas, Size size) {
    // 畫布原點平移到屏幕中央
    canvas.translate(size.width / 2, size.height / 2);
    // ，因為手勢識別的原點是左上角,所以這里將存儲的點相對的原點進行偏移到跟畫布一致 負值向左上角偏移
    pos = touchController.points
        .map((e) => e.translate(-size.width / 2, -size.height / 2))
        .toList();

// 定義畫筆
    var paint = Paint()
      ..strokeWidth = 2
      ..color = Colors.purple
      ..style = PaintingStyle.stroke
      ..isAntiAlias = true;

    // canvas.drawImage(image, Offset(-image.width / 2, -image.height / 2), paint);

    // 如果點小于4個 那么就只繪制點 如果>=4個點 那么就繪制貝塞爾曲線
    if (pos != null && pos!.length >= 4) {
      var path = Path();
      // 設(shè)置起點 手指第一個按壓的點
      path.moveTo(pos![0].dx, (pos![0].dy));
      // path添加第一個貝塞爾曲線
      path.cubicTo(pos![1].dx,pos![1].dy, pos![2].dx, pos![2].dy, pos![3].dx,
          pos![3].dy);
          //繪制輔助線
      _drawHelpLine(canvas, size, paint, 0);
      // 繪制首個貝塞爾曲線
      canvas.drawPath(path, paint..color = Colors.purple);
      
      // for循環(huán) 繪制第2個以后的曲線 以上個終點為下一個的起點
      for (int i = 1; i < (pos!.length - 1) ~/ 3; i++) {
          //之后貝塞爾曲線的起點都是上一個貝塞爾曲線的終點
          // 比如第一個曲線 1,2,3,4.第二個就是4,5,6,7...以此類推，這樣我們才能把線連接起來繪制圖案
        // 這里把繪制之前的顏色覆蓋
      // canvas.drawPath(path, paint..color = Colors.white);
        // 繪制輔助線
        _drawHelpLine(canvas, size, paint, i);
        //繪制貝塞爾曲線
        path.cubicTo(
          pos![i * 3 + 1].dx,
          pos![i * 3 + 1].dy,
          pos![i * 3 + 2].dx,
          pos![i * 3 + 2].dy,
          pos![i * 3 + 3].dx,
          pos![i * 3 + 3].dy,
        );

        if (i == 8) {
          path.close();
        }
        canvas.drawPath(path, paint..color = Colors.purple);
      }

      // 繪制輔助點
      _drawHelpPoint(canvas, paint);
      // 選中點
      _drawHelpSelectPoint(canvas, size, paint);
    } else {
      // 繪制輔助點
      _drawHelpPoint(canvas, paint);
    }


    // 畫眼睛 眼睛位于起點的左側(cè)，所以中心點向左偏移
    canvas.drawCircle(
        pos!.first.translate(-50, 5),
        10,
        paint
          ..color = Colors.black87
          ..style = PaintingStyle.stroke
          ..strokeWidth = 2);
    canvas.drawCircle(
        pos!.first.translate(-53, 5),
        7,
        paint
          ..color = Colors.black87
          ..style = PaintingStyle.fill);
  }
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
  return false;
}

void _drawHelpPoint(Canvas canvas, Paint paint) {
  canvas.drawPoints(
      PointMode.points,
      pos ?? [],
      paint
        ..strokeWidth = 10
        ..strokeCap = StrokeCap.round
        ..color = Colors.redAccent);
}

void _drawHelpSelectPoint(Canvas canvas, Size size, Paint paint) {
  Offset? selectPos = touchController.selectPoint;
  selectPos = selectPos?.translate(-size.width / 2, -size.height / 2);
  if (selectPos == null) return;
  canvas.drawCircle(
      selectPos,
      10,
      paint
        ..color = Colors.green
        ..strokeWidth = 2);
}

void _drawHelpLine(Canvas canvas, Size size, Paint paint, int i) {
  canvas.drawLine(
      Offset(pos![i * 3].dx, pos![i * 3].dy),
      Offset(pos![i * 3 + 1].dx, pos![i * 3 + 1].dy),
      paint
        ..color = Colors.redAccent
        ..strokeWidth = 2);

  canvas.drawLine(
      Offset(pos![i * 3 + 1].dx, pos![i * 3 + 1].dy),
      Offset(pos![i * 3 + 2].dx, pos![i * 3 + 2].dy),
      paint
        ..color = Colors.redAccent
        ..strokeWidth = 2);

  canvas.drawLine(
      Offset(pos![i * 3 + 2].dx, pos![i * 3 + 2].dy),
      Offset(pos![i * 3 + 3].dx, pos![i * 3 + 3].dy),
      paint
        ..color = Colors.redAccent
        ..strokeWidth = 2);
}