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

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

  int get selectIndex => _selectIndex;

  List<Offset> get points => _points;

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

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

}

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

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

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

  List<Offset>? pos; //存儲(chǔ)手勢(shì)按壓的點(diǎn)

  @override
  void paint(Canvas canvas, Size size) {
    // 畫布原點(diǎn)平移到屏幕中央
    canvas.translate(size.width / 2, size.height / 2);
    // ，因?yàn)槭謩?shì)識(shí)別的原點(diǎn)是左上角,所以這里將存儲(chǔ)的點(diǎn)相對(duì)的原點(diǎn)進(jìn)行偏移到跟畫布一致 負(fù)值向左上角偏移
    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);

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

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


    // 畫眼睛 眼睛位于起點(diǎn)的左側(cè)，所以中心點(diǎn)向左偏移
    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);
}