在Flutter中创建图像遮罩

Question

Flutter提供了数种基于路径（如裁剪路径）的掩码方式。我正在尝试找到一种方法，可以使用像下面这个例子中带有透明层的图像来掩盖另一个图像/视图或作为通用掩码。

我的第一反应是查看CustomPaint类，但我无法在这个初始想法之后弄清楚它。

- Ilja

---

请查看Paint#blendMode属性。 - pskink

@pskink经过一番探索，BlendMode.dstIn看起来就是我正在寻找的！谢谢你，你想为其他人写一个关于这个的答案吗？这样我就可以接受它了。 - Ilja

请继续，编写一个自我回答。 - pskink

Answer 1

Flutter有一个名为BoxDecoration类的类，它接受BlendMode枚举。通过利用这些，您可以使用图像实现各种遮罩效果，对于我上面的特定情况，dstIn是一种解决方案。

- Ilja

---

@lija，你能否举个例子呢？我在将两张图片蒙版时遇到了问题。 - rezam

Answer 2

这是一个示例，它将掩码图像中的任何白色像素转换为主要图像中的透明像素。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as img;

Image? _image;

Future<void> _loadImage(String maskPath, String imgPath) async {
  ByteData data = await rootBundle.load(maskPath);
  List<int> bytes = data.buffer.asUint8List();
  img.Image mask = img.decodeImage(Uint8List.fromList(bytes))!;
  data = await rootBundle.load(imgPath);
  bytes = data.buffer.asUint8List();
  img.Image image = img.decodeImage(Uint8List.fromList(bytes))!;
  for (int y = 0; y < mask.height; y++) {
    for (int x = 0; x < mask.width; x++) {
      if (mask.getPixel(x, y) == img.getColor(255, 255, 255, 255)) {
        image.setPixel(x, y, img.getColor(0, 0, 0, 0));
      }
    }
  }
  _image = Image.memory(Uint8List.fromList(img.encodePng(image!)));
}

dependencies:
  image: ^3.0.1

- osama Adel

Answer 3

我已经在这里链接发布了对于自己相同问题的答案，使用了一个带有圆角正方形蒙版和图像的自定义绘制类。

  @override
  void paint(Canvas canvas, Size size) {
    if (image != null && mask != null) {
      var rect = Rect.fromLTRB(0, 0, 200, 200);
      Size outputSize = rect.size;
      Paint paint = new Paint();

      //Mask
      Size maskInputSize = Size(mask.width.toDouble(), mask.height.toDouble());
      final FittedSizes maskFittedSizes =
          applyBoxFit(BoxFit.cover, maskInputSize, outputSize);
      final Size maskSourceSize = maskFittedSizes.source;

      final Rect maskSourceRect = Alignment.center
          .inscribe(maskSourceSize, Offset.zero & maskInputSize);

      canvas.saveLayer(rect, paint);
      canvas.drawImageRect(mask, maskSourceRect, rect, paint);

      //Image
      Size inputSize = Size(image.width.toDouble(), image.height.toDouble());
      final FittedSizes fittedSizes =
          applyBoxFit(BoxFit.cover, inputSize, outputSize);
      final Size sourceSize = fittedSizes.source;
      final Rect sourceRect =
          Alignment.center.inscribe(sourceSize, Offset.zero & inputSize);

      canvas.drawImageRect(
          image, sourceRect, rect, paint..blendMode = BlendMode.srcIn);
      canvas.restore();
    }
  }

结果：

- Daniel Wilson