使用 ImageElement 绘制图像答案

【问题标题】：drawImage with ImageElement使用 ImageElement 绘制图像
【发布时间】：2013-05-20 07:54:50
【问题描述】：

工作：（文档有一个带有 id="img" src="img.png" 的 img 标签，并且可以工作）

  void test() {
    ImageElement img = query('#img');
    context.drawImage(img, 0, 0);
  }

不工作：

  void test() {
    ImageElement img = new ImageElement(src: 'img.png');
    context.drawImage(img, 0, 0);
  }

那么，为什么我不能使用文档中的“新 ImageElement”而不是“查询”？

【问题讨论】：

标签： dart dart-html

【解决方案1】：

问题在于，在您调用 drawImage 时图像尚未加载（与嵌入页面并在 dart 代码运行之前加载时相反）。您应该监听 onLoad 流，并且只在加载后才绘制图像：

  ImageElement img = new ImageElement(src: "img.png");
  img.onLoad.listen((value) => context.drawImage(img, 0, 0));

【讨论】：

【解决方案2】：

我想我会稍微详细说明一下图像加载语法，参考 onError、onDone 和 cancelOnError...

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");
  }

【讨论】：