flutter - 用 flutter canvas 在形状上切一个洞

Question

如何使用 flutter canvas 在形状中“切一个洞”？ 我有一组相当复杂的形状，看起来像真实世界的物体。这个物体上有一个圆角矩形的孔。

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

Answer 1

您可以使用 Path.combine连同 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;
  }
  
}

用法:

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(),
      ),

  }

}

结果:

当然，如果您希望孔是圆角矩形，只需减去 RRect 而不是 Circle。