flutter painting on canvas and erase drawing

Question

i am working on a canvas drawing module in to it i need to erase user drawing

basic funda is

adding image in canvas
user can draw on image using pencil (i.e black color) now user can erase this black color on erase function (i.e clear user drawing )

my try is :

case PaintMode.eraser:
              print('eraser**** _image Painter!!!*'); // print(_painter.color)
              //  canvas.saveLayer(Offset.zero & size, Paint());1
              var _painterTemp = _painter!
                // ..color = Colors.transparent.withOpacity(0.8)//also tried it
                ..strokeCap = StrokeCap.round
                ..blendMode = BlendMode.clear;
    
              for (var i = 0; i < _offset!.length - 1; i++) {
                if (_offset[i] != null && _offset[i + 1] != null) {
                  final _path = Path()
                    ..moveTo(_offset[i]!.dx, _offset[i]!.dy)
                    ..lineTo(_offset[i + 1]!.dx, _offset[i + 1]!.dy);
                
                } else if (_offset[i] != null && _offset[i + 1] == null) {
                 
                  canvas.drawPoints(PointMode.points, [_offset[i]!], _painterTemp);
                }
              }
              //   canvas.restore();//1
    
              break

but i am getting black lines only

took reference from https://github.com/yellowQ-software/yellowQ-Flutter-Image-Painter

edit----- i've edited like

case PaintMode.eraser:
          print('eraser**** _image Painter!!!*');

       
          var _painterTemp = _painter!
            ..color = Colors.transparent
            ..blendMode = BlendMode.clear; //srcOver

          for (var i = 0; i < _offset!.length - 1; i++) {
            if (_offset[i] != null && _offset[i + 1] != null) {
              final _path = Path()
                ..moveTo(_offset[i]!.dx, _offset[i]!.dy)
                ..lineTo(_offset[i + 1]!.dx, _offset[i + 1]!.dy);

              canvas.drawPath(_path, _painter);

              canvas.drawPath(_path, _painterTemp);
              canvas.saveLayer(Offset.zero & size, Paint());
            } else if (_offset[i] != null && _offset[i + 1] == null) {
              canvas.drawPoints(PointMode.points, [_offset[i]!], _painter);
              canvas.drawPoints(PointMode.points, [_offset[i]!], _painterTemp);
            }
            //  canvas.saveLayer(Offset.zero & size, Paint()); //1
          }
          //   canvas.restore();//1

          break;

but not working but getting custom painter called canvas.save() or canvas.saveLayer() at least 773 more times than it called canvas.restore().

any help?

Can't you use the color of the background (canvas), so it looks like it is erasing? — Jigar Patel, Jan 20 '22 at 05:40
@jigar 1. adding image in canvas 2. user can draw on image using pencil (i.e black color) now user can erase this black color on erase function (i.e clear user drawing ) — Developer, Jan 20 '22 at 05:44
yes, you need `saveLayer` - first you have to draw black lines, then lines with `BlendMode.clear` — pskink, Jan 20 '22 at 05:54
you call `canvas.drawImage`, then `canvas.saveLayer` then you draw all the lines with `paint.color = Colors.black`, then all the lines with `paint.blendMode = BlendMode.clear` - and finally `canvas.restore` — pskink, Jan 20 '22 at 06:09
@pskink please check update.its not working but getting issue.correct me where i am wrong — Developer, Jan 20 '22 at 06:16
`canvas.drawImage(image, Offset.zero, Paint()); canvas.saveLayer(Offset.zero & size, Paint()); final paint = Paint(); canvas.drawRect(Rect.fromLTWH(100, 100, 200, 200), paint..color = Colors.black); canvas.drawRect(Rect.fromLTWH(150, 150, 100, 100), paint..blendMode = BlendMode.clear); canvas.restore();` - run it as it is and then run it again without `canvas.saveLayer` and `canvas.restore` — pskink, Jan 20 '22 at 06:26

flutter painting on canvas and erase drawing

0 Answers0