Flutter提供了数种基于路径(如裁剪路径)的掩码方式。我正在尝试找到一种方法,可以使用像下面这个例子中带有透明层的图像来掩盖另一个图像/视图或作为通用掩码。
我的第一反应是查看CustomPaint类,但我无法在这个初始想法之后弄清楚它。
Flutter提供了数种基于路径(如裁剪路径)的掩码方式。我正在尝试找到一种方法,可以使用像下面这个例子中带有透明层的图像来掩盖另一个图像/视图或作为通用掩码。
我的第一反应是查看CustomPaint类,但我无法在这个初始想法之后弄清楚它。
Flutter有一个名为BoxDecoration类的类,它接受BlendMode枚举。通过利用这些,您可以使用图像实现各种遮罩效果,对于我上面的特定情况,dstIn
是一种解决方案。
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
我已经在这里链接发布了对于自己相同问题的答案,使用了一个带有圆角正方形蒙版和图像的自定义绘制类。
@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();
}
}
结果:
Paint#blendMode
属性。 - pskinkBlendMode.dstIn
看起来就是我正在寻找的!谢谢你,你想为其他人写一个关于这个的答案吗?这样我就可以接受它了。 - Ilja