如何从Canvas CustomPaint擦除/剪切?

问题描述

我已经尝试过将Canvas.clipPath和GestureDetector一起使用，就像在画布上的橡皮擦一样，我在Container中使用CustomPaint并将其设置为imageDecoration，所以我想也许还有另一种解决方法通过在设置

I have already tried to use Canvas.clipPath along with GestureDetector to be like eraser on the canvas where i use the CustomPaint inside a Container with imageDecoration set, so i thought maybe there is another workaround this by using Canvas.drawPath along setting

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

但是它绘制黑线而不是擦除

but it draws black lines instead of erasing

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

any idea how to get around this?

谢谢

推荐答案

此代码可以为您提供帮助！

May this code can help you!

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

You need saveLayer, then restores to save Paint

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

Maybe you need to add this code to te Statefull widget.

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;
      }
    });
  }

这篇关于如何从Canvas CustomPaint擦除/剪切?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！