canvas - 在Flutter中drawImage或paintImage均无法正常工作

标签 canvas dart flutter flutter-layout

我基本上想将 Assets 文件夹中的图像显示在 Canvas 上。

    import 'package:flutter/material.dart' as ui;

    ...

    ui.Image img = ui.Image.asset("images/some_image.png");
    ui.paintImage(canvas: canvas, image: img);

当我尝试将img分配给paintImage的图像时,收到以下错误消息。

The argument type 'Image (C:\ABC\flutter\packages\flutter\lib\src\widgets\image.dart)' can't be assigned to the parameter type 'Image (C:\ABC\flutter\bin\cache\pkg\sky_engine\lib\ui\painting.dart)'.



我真的不知道会出什么问题,我已经看到其他与ui.Image具有类似方法的代码。

请指教。

最佳答案

flutter中有两个类,称为Image,位于不同的程序包中。

有一个Widget,其行为类似于小部件,可以通过 Assets ,内存或网络通过其命名的构造函数实例化。

还有一个ui包Image,它在较低级别(例如CustomPainter)中绘画时使用。由于此版本位于ui软件包中,因此通常使用ui前缀导入,如下所示:

import 'dart:ui' as ui;

不要将material导入为ui!这将导致很多困惑。

要制作小部件,请使用Image.asset构造函数,并传递 Assets 名称。

要使用 Assets 制作ui.Image,请使用以下代码段:
  Future<ui.Image> load(String asset) async {
    ByteData data = await rootBundle.load(asset);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    ui.FrameInfo fi = await codec.getNextFrame();
    return fi.image;
  }

关于canvas - 在Flutter中drawImage或paintImage均无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59436361/

相关文章:

javascript - 试图在 Canvas 中实现的CSS动画

javascript - 清除按钮不适用于我的 javascript 和 hmtl5 Canvas

javascript - HTML5 canvas渲染矩形的奇怪bug(?)

flutter - 如何在 Dart/Flutter 中从 List<dynamic> 转换为 List<DateTime>?

dart - Flutter:本地通知插件,当用户点击通知时导航到特定屏幕

javascript - Cropit 将 Canvas 图像上传到 NodeJS

flutter - 在 flutter web 中导航回上一页时,URL 路径未更改

javascript - d3.js 不能在 shadowDOM 中工作

flutter 多选不起作用或需要类似的东西

api - 如何访问 COWIN API?