Flutter CustomPainter中BlendMode.srcIn不生效问题及修复方案

你遇到的问题是因为BlendMode.srcIn仅作用于当前绘制的源内容（蓝色椭圆），只会保留椭圆与画布上已有内容（红色矩形）的重叠部分，但不会隐藏之前绘制的红色矩形的非重叠区域。要实现两条路径非重叠部分均隐藏，仅保留重叠区域，可以用以下两种方法：

方法一：直接计算路径交集 #

通过Path.combine获取两个路径的重叠区域，只绘制这个交集部分：

class ShapeBlender extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var dstPath = Path()..addRect(Rect.fromLTWH(50, 50, 100, 100));
    var srcPath = Path()..addOval(Rect.fromLTWH(0, 0, 100, 100));

    // 计算两条路径的交集
    final intersectionPath = Path.combine(PathOperation.intersect, dstPath, srcPath);

    var dstPaint = Paint()..color = Colors.red;
    var srcPaint = Paint()..color = Colors.blue;

    // 仅绘制重叠区域
    canvas.drawPath(intersectionPath, dstPaint);
    canvas.drawPath(intersectionPath, srcPaint);
  }

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

方法二：使用图层与混合模式 #

通过saveLayer创建临时图层，结合裁剪实现仅保留重叠区域：

class ShapeBlender extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var dstPath = Path()..addRect(Rect.fromLTWH(50, 50, 100, 100));
    var srcPath = Path()..addOval(Rect.fromLTWH(0, 0, 100, 100));

    var dstPaint = Paint()..color = Colors.red;
    var srcPaint = Paint()
      ..color = Colors.blue
      ..blendMode = BlendMode.srcIn;

    // 创建临时图层
    final layerBounds = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.saveLayer(layerBounds, Paint());

    // 绘制红色矩形
    canvas.drawPath(dstPath, dstPaint);
    // 用srcIn模式绘制蓝色椭圆（仅保留重叠部分）
    canvas.drawPath(srcPath, srcPaint);

    // 裁剪图层，仅保留有绘制内容的区域（即重叠部分）
    canvas.clipPath(Path.combine(PathOperation.intersect, dstPath, srcPath));
    canvas.restore();
  }

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

原代码问题说明 #

原代码中BlendMode.srcIn仅对蓝色椭圆生效，让椭圆只显示与红色矩形重叠的部分，但红色矩形的非重叠区域没有被处理，所以会完整显示。上面两种方法都能同时隐藏两条路径的非重叠部分，只保留重叠区域。

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