如何从 Canvas CustomPaint 擦除/剪辑？

Question

我已经尝试使用Canvas.clipPathwithGestureDetector就像画布上的橡皮擦一样，我在CustomPaint里面使用了Containerwith imageDecorationset，所以我想也许还有另一种解决方法，通过使用withCanvas.drawPath设置

 final Paint _eraserPaint = Paint()
    ..color = Colors.transparent
    ..blendMode = BlendMode.clear
    ..strokeWidth = 8
    ..style = PaintingStyle.stroke
    ..isAntiAlias = true;

但它画黑线而不是擦除

知道如何解决这个问题吗？

谢谢

Answer 1

关键是saveLayer在绘制任何可能需要擦除的内容之前调用。完成后（从而创建一个新图层供您使用），您可以使用任何图层进行绘制以进行Color填充，或进行绘制BlendMode.clear以进行擦除。最后，调用restore将新图层“合并”到其他现有图层中。

例如，让我们画一个红色正方形并从中减去一个圆：

void paint(Canvas canvas, Size size) {
  canvas.saveLayer(Rect.largest, Paint());
  canvas.drawRect(Rect.fromLTWH(0, 0, 80, 80), Paint()..color = Colors.red);
  canvas.drawCircle(Offset(40, 40), 40, Paint()..blendMode = BlendMode.clear);
  canvas.restore();
}

结果示例：

Answer 2

希望这段代码可以帮助你！

class DrawingPainter extends CustomPainter {

  List<DrawingPoints> pointsList;
  List<Offset> offsetPoints = List();
  
  DrawingPainter({
    this.pointsList,
  });

  @override
  void paint(Canvas canvas, Size size) {
    canvas.saveLayer(Rect.fromLTWH(0, 0, size.width, size.height), Paint());
    for (int i = 0; i < pointsList.length - 1; i++) {
      if (pointsList[i] != null && pointsList[i + 1] != null) {
        canvas.drawLine(pointsList[i].points, pointsList[i + 1].points, pointsList[i].paint);
        canvas.drawCircle(pointsList[i].points, pointsList[i].paint.strokeWidth/2, pointsList[i].paint);
      }
    }
    canvas.restore();
  }

  @override
  bool shouldRepaint(DrawingPainter oldDelegate) => true;
}

class DrawingPoints {
  Paint paint;
  Offset points;
  DrawingPoints({this.points, this.paint});
}

需要saveLayer，然后恢复保存Paint

也许您需要将此代码添加到 Statefull 小部件中。

void changeBrush(bool isErease){
    setState(() {
      if ( isErease ){
        paint = Paint();
        paint.blendMode = BlendMode.clear;
        paint.color = Colors.white;
        paint.strokeWidth = strokeWidth;
      }else{
        paint = Paint();
        paint.isAntiAlias = true;
        paint.color = selectedColor.withOpacity(opacity);
        paint.strokeWidth = strokeWidth;
      }
    });
  }