如何为颤振绘图应用程序实现橡皮擦功能

Question

有一个关于通过 flutter ( YouTube )创建绘图应用程序的视频，该应用程序支持在用户点击屏幕时绘制线条/点，但我找不到一种功能/方法来擦除用户绘制的内容，例如 Android 原生（例如此处）对于线。我不能只是在它们上面覆盖一些像白色这样的颜色，因为我在手势检测器下面有背景图像。

有人可以给我一些建议吗？

我的示例项目：

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<Offset> points = <Offset>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
            onPanUpdate: (DragUpdateDetails details) {
              if (details.localPosition.dx < 0) {
                return;
              }
              RenderBox oRenderBox = context.findRenderObject();
              Offset oLocationPoints =
                  oRenderBox.localToGlobal(details.localPosition);
              setState(() {
                this.points = new List.from(this.points..add(oLocationPoints));
              });
            },
            onPanEnd: (DragEndDetails details) => this.points.add(null),
            child: CustomPaint(
                painter: SignaturePainter(
                    points: this.points),
                size: Size.infinite)),
      ),
    );
  }
}

class SignaturePainter extends CustomPainter {
  List<Offset> points = <Offset>[];

  SignaturePainter({this.points});
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.red
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 3.0;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null) {
        canvas.drawLine(points[i], points[i + 1], paint);
      }
    }
  }

  @override
  bool shouldRepaint(SignaturePainter oldDelegate) {
    return oldDelegate.points != points;
  }
}

谢谢。

Answer 1

将saveLayer()和restore()与BlendMode.clear 一起使用。

从BlendMode.clear：

使用 Canvas.saveLayer 和 Canvas.restore 时，将在调用 Canvas.restore 时应用赋予 Canvas.saveLayer 的 Paint 混合模式。每次调用 Canvas.saveLayer 都会引入一个新层，在该层上绘制形状和图像；当 Canvas.restore 被调用时，该层然后被合成到父层上，源是最近绘制的形状和图像，目标是父层

示例：

@override
void paint(Canvas canvas, Size size) {
  // default blendMode=BlendMode.srcOver
  final _blendMode = BlendMode.clear;

  // let's pretend this rectangle is an image.
  // in this case, we don't want anything erased from the image, 
  // and we also want the image to be drawn under the eraser.
  canvas.drawRect(Rect.fromLTWH(100, 100, 100, 100), Paint()..color=Colors.white);

  // after having drawn our image, we start a new layer using saveLayer().
  canvas.saveLayer(Rect.fromLTWH(0, 0, size.width, size.height), Paint());

  // drawing the line that should be erased partially.
  canvas.drawLine(
    Offset(100, 100), Offset(200, 200), Paint()..color = Colors.black..strokeWidth = 5.0);

  // erasing parts of the first line where intersected with this line.
  canvas.drawLine(
    Offset(100, 200), Offset(200, 100), Paint()..color=Colors.red..strokeWidth = 5.0..blendMode=_blendMode);

  // first composite this layer and then draw it over the previously drawn layers.
  canvas.restore();

  // move on with other draw commands..
}