学习一些常用的混合模式之BlendMode.srcOut

火柴就是我2026-01-07 15:57

1 SrcOut

用途：

Keeps the source pixels that do not cover destination pixels. Discards source pixels that cover destination pixels. Discards all destination pixels.

计算公式：

测试代码:

js 复制代码

 @override
  void paint(Canvas canvas, Size size) {
    var width = size.width;
    var height = size.height;

    canvas.saveLayer(Rect.fromLTWH(0, 0, width, height), Paint());
    canvas.drawRect(
      Rect.fromLTWH(0, 0, width, height),
      Paint()..color = Colors.red.withOpacity(1), // 半透明红色
    );

    var srcPath = Path();
    srcPath.addRect(Rect.fromLTWH(width/2 - 30, height/2 - 30, 60, 60));
    var srcPaint = Paint()
      ..color = Colors.blue // 源颜色：蓝色
      ..style = PaintingStyle.stroke // 填充模式
      ..strokeWidth = 10
      ..blendMode = BlendMode.srcOut; // 混合模式
    canvas.drawPath(srcPath, srcPaint);
    canvas.restore();
  }

第一个矩形就是dst 第二个边框就是src

参考上面的公式可以得出

a = (1 - dst.a) * src.a = （1-1）*1 = 0

c = (1 - dst.a) * src.c = 0

所以混合的结果就是"00000000" 就是透明的。所以效果如下

通过修改src的alpha(透明度)属性，也可以实现不同的效果。比如改成0.7就是下面的效果。按公式计算混合区的透明度就是0.3,色值就是 blue * 0.3