Flutter Canvas.drawImage() 绘制像素化图像

Question

在我的 Flutter 项目中，我使用 CustomPainter 绘制自定义形状。在那个 CustomPainter 中，我需要绘制一个 png 图像，它在我的 Assets 文件夹中有多种尺寸，因此我可以获得适合屏幕密度的正确图像:

assets
   \1.5x
      image.png   // 54 x 54 pixels
   \2.0x
      image.png   // 72 x 72 pixels
   \3.0x
      image.png   // 108 x 108 pixels
   \4.0x
      image.png   // 144 x 144 pixels
   image.png      // 36 x 36 pixels

这是我如何加载我的图像，以获取 Image 文件:

import 'dart:ui' as ui;

Future<ui.Image> getImage() async {
   AssetImage assetImage = AssetImage("assets/image.png");
   ImageStream stream = assetImage.resolve(createLocalImageConfiguration(context));
   Completer<ui.Image> completer = Completer();
   stream.addListener(ImageStreamListener((Imageinfo image, _) {
      return completer.complete(image.image);
   }
   return completer.future;
}

在我的 CustomPainter.paint() 函数中，这是我在加载后绘制 Image 的方式:

@override
void paint(Canvas canvas, Size size) {
   // ...
   canvas.drawImage(
      myImage, // <- the loaded image
      Offset(20, 20),
      Paint()
   );
}

我有两个问题:

• 图像的绘制尺寸不正确(它在 HDPI 屏幕上显示的尺寸为 54 点，而加载的图像尺寸为 54 像素……这是 Flutter 错误吗？ )
• 即使我使用 canvas.drawImageRect() 绘制 36 x 36 点的图像，绘制的图像有时仍会出现故障，具体取决于图像。是的，我仔细检查了原始图像的大小。

那么我应该怎么做才能在我的 canvas 上为正确的屏幕密度绘制正确的图像，以便正确绘制它？

谢谢。

Answer 1

这是我最终让它工作的方法(感谢@pskink):

第 1 步:返回整个 ImageInfo 对象，而不仅仅是图像:

Future<ImageInfo> getImageInfo(BuildContext context) async {
   AssetImage assetImage = AssetImage("assets/image.png");
   ImageStream stream = assetImage.resolve(createLocalImageConfiguration(context));
   Completer<ImageInfo> completer = Completer();
   stream.addListener(ImageStreamListener((Imageinfo imageInfo, _) {
      return completer.complete(imageInfo);
   }
   return completer.future;
}

第 2 步:使用 ImageInfo.scale 属性和一些过滤来绘制图像:

@override
void paint(Canvas canvas, Size size) {
   // ...
   paintImage(
      canvas: canvas,
      rect: Rect.fromLTWH(
         20, 20,
         myImageInfo.width / myImageInfo.scale,
         myImageInfo.height / myImageInfo.scale),
      image: myImageInfo.image,                // <- the loaded image
      filterQuality: FilterQuality.low,
   );
}