Cutting a hole in a shape with flutter canvas

Question

How do I "cut a hole" in a shape with flutter canvas? I have this rather complex set of shapes that is made to look like a real world object. This object has a hole in it shaped like a rounded rectangle.

I would really like to subtract a RRect from a shape, but I cannot find any information on how to do this. canvas.clipRRect(myRRect) just removes everything that is not covered by myRRect. I want the opposite of that. i.e. to make a myRRect shape hole in the current canvas shape or shapes.

Why is there no accepted answer for this? I'd like to know which one answered your question. — Nerdy Bunz, Apr 27 '22 at 08:01

score 33 · Answer 1 · edited Mar 23 '22 at 16:30

You can use Path.combine along with the difference operation to create the hole.

The custom painter :

class HolePainter extends CustomPainter {
  
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.blue;
    canvas.drawPath(
        Path.combine(
          PathOperation.difference,
          Path()..addRRect(RRect.fromLTRBR(100, 100, 300, 300, Radius.circular(10))),
          Path()
            ..addOval(Rect.fromCircle(center: Offset(200, 200), radius: 50))
            ..close(),
        ),
        paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return null;
  }
  
}

Usage :

class EditAvatar extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('Hole in rounded rectangle'),
      ),
      body: CustomPaint(
        painter: HolePainter(),
        child: Container(),
      ),

  }

}

Result :

Of course if you want the hole to be a rounded rect simply substract an RRect instead of a Circle.

monsieurtanuki · Answer 2 · 2023-04-17T09:29:50.877

16

A solution is to use PathFillType.evenOdd:

// circle with empty RRect inside
final Path path = Path();
path.fillType = PathFillType.evenOdd;
path.addOval(Rect.fromCircle(center: center, radius: radius));
path.addRRect(RRect.fromRectAndRadius(
    Rect.fromCircle(center: center, radius: radius / 2),
    Radius.circular(radius / 10)));
canvas.drawPath(path, paint);

edited Apr 17 '23 at 09:29

answered Oct 25 '20 at 15:55

monsieurtanuki

191
1
6

I do think this is the best way of doing it because it 1. works with clipping and 2. on all Flutter renderers (also web). – creativecreatorormaybenot Apr 21 '21 at 13:13
This worked better for me, combine/difference method had weird rendering inconsistencies on the web. – Daniel M. Aug 29 '21 at 19:01

score 3 · Answer 3 · answered Jul 08 '19 at 06:12

You can try with different BlendMode in Custom Painter, Below is one of the example which you can refer:

class MyPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // below one is big circle and instead of this circle you can draw your shape here.
    canvas.drawCircle(Offset(200, 200), 100, Paint()
      ..color = Colors.orange[200]
      ..style = PaintingStyle.fill);

    // below the circle which you want to create a cropping part.
    RRect rRect = RRect.fromRectAndRadius(Rect.fromCenter(center: Offset(200, 200), width: 75, height: 75), Radius.circular(8));
    canvas.drawRRect(rRect, Paint()
      ..color = Colors.orange[200]
      ..style = PaintingStyle.fill
      ..blendMode = BlendMode.dstOut);

    canvas.save();
    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Here, I have used BlendMode.dstOut which will be used to show the destination sources, but only where the two sources do not overlap.

Thanks for the suggestion. Sadly I could not find any blendmode that did what I wanted. Some of them draw the last shape as a black on top, but most seem to do nothing. — Mathias Nielsen, Jul 08 '19 at 22:00

score 0 · Answer 4 · answered Jul 05 '23 at 12:03

0

for anybody that can't get Yann39's solution working. For me the problem was that i didnt use canvas.save() at the end of the paint method

answered Jul 05 '23 at 12:03

JJan1999

1
1

Cutting a hole in a shape with flutter canvas

4 Answers4

Linked