如何在 Flutter 中对两个图像进行异或运算

【问题标题】：How to XOR two images in Flutter如何在 Flutter 中对两个图像进行异或运算
【发布时间】：2020-10-19 23:20:34
【问题描述】：

我有这两张图片

我想要做的是对它们进行异或以获得这张图片：

我尝试使用 CustomPaint 并将 BlendMode 设置为 XOR 来做到这一点，但它给了我一个黑屏

这是我使用的代码：

class XorPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) async {
    if (imageA != null && imageB != null) {
      canvas.drawImage(imageA, Offset.zero, Paint());
      canvas.save();
      canvas.drawImage(
          imageB, Offset.zero, Paint()..blendMode = BlendMode.xor);
      canvas.restore();
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

欲了解更多信息：see this

【问题讨论】：

标签： image flutter dart xor

【解决方案1】：

我相信它更多的是对BlendMode.xor 的误解，他们所做的就像一个常规的异或真值表，如果它们都是某种颜色，则每个像素要么为 0（透明），要么如果一个像素重叠，则它们不受影响它们在同一区域是透明的，因此您将始终得到一个透明的黑色正方形（除非例如您制作具有透明背景的苹果图像，在这种情况下，第二个图像将有一个空白空间，其形状为苹果在中间）。我认为您真正想要的是差异或排除以产生这种否定效果

class XorPainter extends CustomPainter {
  final ui.Image imageA;
  final ui.Image imageB;
  
  XorPainter(this.imageA, this.imageB);
  
  @override
  void paint(Canvas canvas, Size size) async {
    canvas.drawImage(imageA, Offset.zero, Paint());
    canvas.saveLayer(null, Paint()..blendMode = BlendMode.difference); // or BlendMode.exclusion
    canvas.drawImage(imageB, Offset.zero, Paint());
    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

【讨论】：