Flutter Canvas如何裁剪绘制到画布边界外的内容？

要实现所有绘制内容自动裁剪到Canvas边界内，不管是基础几何图形还是经过变换的PNG、SVG资源，可直接使用Canvas内置的裁剪API，是通用解决方案。

核心实现逻辑 #

在绘制需要裁剪的内容前，调用clipRect方法将裁剪区域限定为Canvas本身的尺寸即可，所有后续绘制的内容都会被自动限制在该区域内。
修改你提供的示例代码，仅需增加一行裁剪逻辑即可达到预期效果：

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.clipRect(Rect.fromLTWH(0, 0, size.width, size.height));
    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;
}

效果说明 #

修改后圆形超出200*200画布左侧的部分会被完全裁剪，和预期效果一致：

拓展说明 #

• 裁剪API是通用能力，不管后续你绘制的是经过平移、缩放、旋转等变换的PNG图片，还是SVG矢量资源，都会生效，不需要针对不同绘制内容单独处理
• 如果需要异形裁剪，可替换clipRect为clipRRect（圆角裁剪）、clipPath（自定义路径裁剪）即可
• 裁剪属于Canvas状态的一部分，一定要配合save()和restore()成对使用，避免裁剪状态影响后续其他绘制逻辑

内容的提问来源于stack exchange，提问作者user2233706