剪辑画布外绘制的对象

Question

如何剪辑画布外绘制的对象？下面，黑色方块代表画布的边界。我不想画左半边的圆，因为它在画布之外：

这是一个简单的示例，但我在画布内绘制 PNG 和 SVG，并对其应用了各种转换，我需要一个解决方案来剪辑画布外绘制的部分。

这是上面的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
            child: Container(
          width: 200,
          height: 200,
          child: CustomPaint(
            child: Container(),
            painter: CanvasPainter(),
          ),
        )),
      ),
    );
  }
}

class CanvasPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
        Rect.fromLTWH(0, 0, size.width, size.height),
        Paint()
          ..style = PaintingStyle.stroke
          ..color = Colors.black);

    canvas.save();
    canvas.translate(0.0, 100.0);
    canvas.drawCircle(Offset(0, 0), 50.0, Paint()..color = Colors.blue);
    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Answer 1

你需要添加 canvas.clipRect(rect);
所以你的代码是这样的：

  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.drawRect(
        rect,
        Paint()
          ..style = PaintingStyle.stroke
          ..color = Colors.black);
    canvas.clipRect(rect);
    canvas.save();
    canvas.translate(0.0, 100.0);
    canvas.drawCircle(Offset(0, 0), 50.0, Paint()..color = Colors.blue);
    canvas.restore();
  }

Answer 2

要防止小部件绘制超出其布局大小，请使用ClipRect 对其进行剪辑。对于圆角矩形，请使用 ClipRRect 和 ClipPath 自定义形状。

ClipRect(
          child: Container(
            width: 200,
            height: 200,
            child: CustomPaint(
              child: Container(),   
              painter: CanvasPainter(),
            ),
          ),
        )

你也可以在CustomPaint之前使用。

我问了一个类似的问题，this answer 也解决了这种情况，在这里我只是重复一遍。