Question

我正在玩Flutter，我使用CustomPainter类实现了一个自定义绘制的小部件。

基元的记录非常清楚。但是，似乎有Image（小部件）和Image（数据结构），因为如果我是Image（小部件），我无法将其传递给Canvas方法{ {1}}因为它需要其他类型的drawImage。

问题是，我无法解决如何将资源加载到Image数据结构中的问题。

有没有人解决过这个问题？

[edit]感谢 rmtmckenzie 我解决了这个问题：

Image

Answer 1

可行的解决方案：

import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/services.dart' show rootBundle;

Future<ui.Image> loadUiImage(String assetPath) async {
  final data = await rootBundle.load(assetPath);
  final list = Uint8List.view(data.buffer);
  final completer = Completer<ui.Image>();
  ui.decodeImageFromList(list, completer.complete);
  return completer.future;
}

Answer 2

为此，您需要直接加载图像，然后实例化它。

我会将装载部分留给您 - 您要么必须直接执行Http request，要么使用AssetBundle.load;或者您可以使用NetworkImage / AssetImage（它们都继承ImageProvider - 请参阅包含示例的the docs。）

如果你直接加载路线，你可以使用instantiateImageCodec实例化一个图像（以编解码器的形式 - ＆gt; frame - ＆gt;图像）。

如果您选择其他路线，则必须像在文档中那样收听流等，但您应该直接获取图像。

编辑：感谢OP在他的问题中包含了工作代码。这对他有用：

rootBundle.load("assets/galaxy.jpg").then( (bd) {
  Uint8List lst = new Uint8List.view(bd.buffer);
  UI.instantiateImageCodec(lst).then( (codec) {
    codec.getNextFrame().then(
      (frameInfo) {
        bkImage = frameInfo.image;
        print ("bkImage instantiated: $bkImage");
        }
      }
    );
  });
});

如何在Canvas对象上绘制从资源加载的图像

2 个答案: