用颤抖的画布在形状上切孔 [英] Cutting a hole in a shape with flutter canvas

问题描述

如何用飘动的画布在形状上切孔？
我有一组相当复杂的形状，看起来像真实世界的对象。

我真的很想从形状中减去RRect，但是我找不到关于该怎么做的任何信息。

这个。
canvas.clipRRect（myRRect）会删除 myRRect 未涵盖的所有内容。我要相反。即在当前的一个或多个画布形状中创建一个 myRRect 形状孔。

解决方案

您可以使用

当然，如果您想使孔成为圆形矩形，只需减去 RRect 而不是圆。

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.

解决方案

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.

这篇关于用颤抖的画布在形状上切孔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！