Flutter canvas刮刮乐

211_1668739627.gif

利用canvas画布给“刮奖区”上面盖一层蒙板，再利用Paint画笔的BlendMode.clear属性，把canvas上的蒙板擦掉

Listener(
        onPointerDown: (PointerDownEvent event) {
          
        },
        onPointerUp: (PointerUpEvent event) {
          
        },
        onPointerCancel: (PointerCancelEvent event) {
          
        },
        onPointerMove: (PointerMoveEvent event) {
          
        },
        child: RepaintBoundary(
          child: CustomPaint(
            foregroundPainter: MyPainter(pointsNotifier),
            child: Container(
              width: width,
              height: height,
              color: Colors.redAccent,
              alignment: Alignment.center,
              child: Text(
                '再来一瓶',
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                  color: Colors.yellow,
                ),
              ),
            ),
          ),
        ),
      )

foregroundPainter是前景画板，蒙层的绘制就在前景画板上

画布外面套了一层Listener，用来监听刮奖的手势，方便在蒙板上画“透明”的线，而RepaintBoundary可以避免因各种父组件造成的过多的重绘。

Canvas画板要根据手势进行画线和实时刷新，先准备一个ValueNotifier和Point类：

enum PointType {
  tap,
  move,
}

class Point {
  Offset offset;
  PointType type;

  Point(this.offset, this.type);
}

class PointsNotifier extends ValueNotifier<List<Point>> {
  PointsNotifier({List<Point>? points}) : super(points ?? <Point>[]);

  void addPoint(Point point) {
    value.add(point);
    notifyListeners();
  }
}

PointsNotifier继承自ValueNotifier，我们可以手动notifyListeners，完成刷新通知，如果直接用ValueNotifier监听List，List的add不会触发刷新，必须给List重新赋值才行
比如下面的方式不会触发刷新：

ValueNotifier<List<Point>> points = ValueNotifier([]);
points.add(Point(offset, type));

这样才会触发：

ValueNotifier<List<Point>> points = ValueNotifier([]);
points = otherPoints;

接下来在手势监听回调中修改Point列表数据：

onPointerDown: (PointerDownEvent event) {
    pointsNotifier.addPoint(Point(
      event.localPosition,
      PointType.tap,
    ));
},
onPointerUp: (PointerUpEvent event) {
    pointsNotifier.addPoint(Point(
      event.localPosition,
      PointType.tap,
    ));
},
onPointerCancel: (PointerCancelEvent event) {
    pointsNotifier.addPoint(Point(
      event.localPosition,
      PointType.tap,
    ));
},
onPointerMove: (PointerMoveEvent event) {
    pointsNotifier.addPoint(Point(
      event.localPosition,
      PointType.move,
    ));
},

Point里保存了一个PointType，如果是拖动类型（PointType.move），我们就把它和上一条线连起来

接下来准备Canvas画布：

class MyPainter extends CustomPainter {
  PointsNotifier _pointsNotifier;
  Paint _paint;

  MyPainter(this._pointsNotifier)
      : _paint = Paint(),
        super(repaint: _pointsNotifier) {
    _paint
      ..strokeWidth = 15
      ..blendMode = BlendMode.clear;
  }

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Rect.fromCenter(
        center: Offset(size.width / 2, size.height / 2),
        width: size.width,
        height: size.height);

    canvas.saveLayer(rect, Paint());

    // 绘制蒙板
    canvas.drawRect(rect, Paint()..color = Colors.grey);

    final List<Point> points = _pointsNotifier.value;
    for (int i = 0; i < (points.length - 1); i++) {
      if (points[i + 1].type == PointType.move) {
        canvas.drawLine(
          points[i].offset,
          points[i + 1].offset,
          _paint,
        );
      }
    }

    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter other) => true;
}

CustomPainter类中可以传入一个repaint来触发刷新，把PointsNotifier传进去即可，Paint的strokeWidth设置画笔粗细，blendMode设置为BlendMode.clear就是“橡皮擦”的效果

在void paint(Canvas canvas, Size size)方法中进行绘制，canvas.drawRect用来绘制蒙板，蒙板完成后，遍历pointsNotifier中保存的Point数组，完成橡皮擦线条绘制

下面这两条很重要：

canvas.saveLayer(rect, Paint());
canvas.restore();

如果blendMode设为BlendMode.clear，必须在绘制前调用saveLayer保存画布状态，绘制完成后restore恢复，否则“橡皮擦”不生效，线条颜色会变黑色

完整代码：

import 'package:flutter/material.dart';

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double width = 200;
  double height = 100;

  PointsNotifier pointsNotifier = PointsNotifier();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Listener(
        onPointerDown: (PointerDownEvent event) {
          pointsNotifier.addPoint(Point(
            event.localPosition,
            PointType.tap,
          ));
        },
        onPointerUp: (PointerUpEvent event) {
          pointsNotifier.addPoint(Point(
            event.localPosition,
            PointType.tap,
          ));
        },
        onPointerCancel: (PointerCancelEvent event) {
          pointsNotifier.addPoint(Point(
            event.localPosition,
            PointType.tap,
          ));
        },
        onPointerMove: (PointerMoveEvent event) {
          pointsNotifier.addPoint(Point(
            event.localPosition,
            PointType.move,
          ));
        },
        child: RepaintBoundary(
          child: CustomPaint(
            foregroundPainter: MyPainter(pointsNotifier),
            child: Container(
              width: width,
              height: height,
              color: Colors.redAccent,
              alignment: Alignment.center,
              child: Text(
                '再来一瓶',
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                  color: Colors.yellow,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

enum PointType {
  tap,
  move,
}

class Point {
  Offset offset;
  PointType type;

  Point(this.offset, this.type);
}

class MyPainter extends CustomPainter {
  PointsNotifier _pointsNotifier;
  Paint _paint;

  MyPainter(this._pointsNotifier)
      : _paint = Paint(),
        super(repaint: _pointsNotifier) {
    _paint
      ..strokeWidth = 15
      ..blendMode = BlendMode.clear;
  }

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Rect.fromCenter(
        center: Offset(size.width / 2, size.height / 2),
        width: size.width,
        height: size.height);

    canvas.saveLayer(rect, Paint());

    // 绘制蒙板
    canvas.drawRect(rect, Paint()..color = Colors.grey);

    final List<Point> points = _pointsNotifier.value;
    for (int i = 0; i < (points.length - 1); i++) {
      if (points[i + 1].type == PointType.move) {
        canvas.drawLine(
          points[i].offset,
          points[i + 1].offset,
          _paint,
        );
      }
    }

    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter other) => true;
}

class PointsNotifier extends ValueNotifier<List<Point>> {
  PointsNotifier({List<Point>? points}) : super(points ?? <Point>[]);

  void addPoint(Point point) {
    value.add(point);
    notifyListeners();
  }
}

PS：期间碰到一个问题，如果画笔Paint设为圆头strokeCap = StrokeCap.round，疯狂绘制线条会越来越卡顿，没能找到解决办法，只能不设置strokeCap属性了