如何在 Dart 中加载图像答案

【问题标题】：How to load an image in Dart如何在 Dart 中加载图像
【发布时间】：2012-07-20 21:31:24
【问题描述】：

我正在尝试 Dart 语言和 HTML5 Canvas 元素，但遇到了一个问题。我不知道如何在 Dart 中加载图像。我可以得到 CanvasRenderingContext2D 并且我可以调用 fillText() 和 fillRect() 并且一切正常，但我正在尝试弄清楚如何加载图像并使用 drawImage 进行绘制。

【问题讨论】：

标签： dart

【解决方案1】：

创建并加载图像

ImageElement image = new ImageElement(src: "my_image.png");
image.onLoad.listen((e) {
    // Draw once the image is loaded
});

加载后在画布上绘制上图

context.drawImage(image, destX, destY);

【讨论】：

嗨，我是 dart 新手，当我尝试 image.on.load.add 函数时，我收到一条错误消息，指出“load”不是事件的成员。此外，代码提示对此也不是很有帮助。我正在使用 Dart Editor 版本 0.4.2_r20259 和 Dart SDK 版本 0.4.2.8_r20259。
好的，我找到了原因：dartlang 核心有更新...Dart News & Updates。现在“image.on.load.add”应该写成“image.onLoad.listen”。
自 Dart 的 M1 发布以来，语法发生了变化，在文件名前添加“src:”（new ImageElement(src:"my_image.png");），否则会导致运行时错误。跨度>

【解决方案2】：

较新的图像加载语法：

readFile() {
    ImageElement image = new ImageElement(src: "plant.png");
    document.body.nodes.add(image);
    image.onLoad.listen(onData, onError: onError, onDone: onDone, cancelOnError: true);
  }

  onData(Event e) {
    print("success: ");
  }

  onError(Event e) {
    print("error: $e");
  }

  onDone() {
    print("done");
  }

【讨论】：

【解决方案3】：

这是另一种方法：

void main() {
  ImageElement image = new ImageElement(src: "pic.png");
  img.onLoad.listen(onData);
  img.onError.listen(onError);
}

void onData(Event e) {
  print("Load success");
}

void onError(Event e) {
  print("Error: $e");
}

【讨论】：