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

【问题标题】：Flutter Canvas.drawImage() draws a pixelated imageFlutter Canvas.drawImage() 绘制像素化图像
【发布时间】：2021-04-02 23:57:22
【问题描述】：

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

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 上绘制正确的图像以获得正确的屏幕密度，以便正确绘制？

谢谢。

【问题讨论】：

尝试使用AssetImage?
@pskink 我在想它，但我不明白如何使用它，你有一个例子吗？
查看ImageProvider官方文档：他们有一个例子
感谢信息，所以你也可以使用你的 drawImageRect :-)
当然，欢迎您，圣诞快乐 :-)

标签： flutter dart

【解决方案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,
   );
}

【讨论】：