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

srcOut

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

计算公式:

当dst.a = 1 的时候 a = 0 c = 0 也就是完全透明.也就是上面那段英文的意思保留非重叠部分的src和dst,移除重叠部分的src和dst。换句话就是如果你想在dst上清除某部分的内容，就可以使用srcOut.

例子:

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

    canvas.saveLayer(Rect.fromLTWH(0, 0, width, height), Paint());
    Paint dstPaint = Paint()..color = Colors.red;
    dstPaint.strokeWidth = 20;
    dstPaint.style = PaintingStyle.stroke;

    canvas.drawCircle(Offset(width/2,height/2), 10, dstPaint);

    canvas.drawCircle(Offset(width/2,height/2), 50, dstPaint);

    canvas.drawCircle(Offset(width/2,height/2), 90, dstPaint);

    canvas.drawCircle(Offset(width/2,height/2), 130, dstPaint);

    var srcPaint = Paint()
      ..color = Colors.blue // 源颜色：蓝色
      ..style = PaintingStyle.stroke // 填充模式
      ..strokeWidth = 70
      ..blendMode = BlendMode.srcOut; // 混合模式
    // canvas.drawRect(Rect.fromLTWH(0, 0, width, height), srcPaint);
    canvas.drawImageRect(image!, Rect.fromLTWH(0, 0, image!.width.toDouble(), image!.height.toDouble()), Rect.fromLTWH(0, 0, width, height), srcPaint);

    canvas.restore();
  }

效果图:

环形跟图片重叠的部分变成透明的，src未重叠部分保留了下来。

例子2:

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

    canvas.saveLayer(Rect.fromLTWH(0, 0, width, height), Paint());
    Paint dstPaint = Paint()..color = Colors.red;
    dstPaint.strokeWidth = 20;
    dstPaint.style = PaintingStyle.stroke;

    canvas.drawCircle(Offset(width/2,height/2), 10, dstPaint);

    canvas.drawCircle(Offset(width/2,height/2), 50, dstPaint);

    canvas.drawCircle(Offset(width/2,height/2), 90, dstPaint);

    canvas.drawCircle(Offset(width/2,height/2), 130, dstPaint);

    var clipPath = ui.Path();
    clipPath.addOval(Rect.fromCenter(center: Offset(width/2,height/2), width: 240, height: 240));
    canvas.clipPath(clipPath);
    var srcPaint = Paint()
      ..color = Colors.blue // 源颜色：蓝色
      ..style = PaintingStyle.stroke // 填充模式
      ..strokeWidth = 70
      ..blendMode = BlendMode.srcOut; // 混合模式
    // canvas.drawRect(Rect.fromLTWH(0, 0, width, height), srcPaint);
    canvas.drawImageRect(image!, Rect.fromLTWH(0, 0, image!.width.toDouble(), image!.height.toDouble()), Rect.fromLTWH(0, 0, width, height), srcPaint);

    canvas.restore();
  }

效果图：

环形跟图片重叠的部分变成透明的，src未重叠部分保留了下来，dst未重叠部分保留了下来。