用颤动画布在形状上切一个洞

如何使用颤动画布在形状上“切一个洞”？ 我有一组相当复杂的形状，看起来像现实世界的物体。该物体上有一个圆角矩形形状的孔。

我真的很想从形状中减去 RRect，但我找不到任何有关如何执行此操作的信息。canvas.clipRRect(myRRect)只是删除所有未覆盖的内容myRRect。我想要相反的。即制作一个myRRect当前画布形状中的形状孔。

您可以使用Path.combine https://api.flutter.dev/flutter/dart-ui/Path/combine.html随着difference https://api.flutter.dev/flutter/dart-ui/PathOperation.html#difference创建孔的操作。

定制画家：

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 :

当然，如果您希望孔成为圆角矩形，只需减去RRect代替Circle.