如何在 Dart lang 中处理图像答案

【问题标题】：How to work with Images in Dart lang如何在 Dart lang 中处理图像
【发布时间】：2012-07-23 18:01:09
【问题描述】：

我之前在这里发布了一个问题（How to load an image in Dart）并得到答案，但同时得到更多问题。为什么我只能这样画图：

image.on.load.add((e) {
    context.drawImage(image, 0, 0);
});

但如果我写的是这样的：

ImageElement image = new ImageElement();
image.src = 'myImage.png';
context.drawImage(image, 0, 0);

^^^ 这不起作用并且不绘制图像。为什么？

bool loaded = false;
ImageElement image = new ImageElement();
image.src = 'myImage.png';
image.on.load.add((e) {
    loaded = true;
});
print(loaded); // on console get - false

^^^ 为什么我是假的？如果图像加载变量加载为真，我创建，但加载不为真。

对不起，我的英语不好。谢谢！

【问题讨论】：

标签： dart

【解决方案1】：

至于你的第一个问题，如果你遗漏了

image.onLoad.listen((e) {
    context.drawImage(image, 0, 0);
});

然后在加载图像时不会执行任何代码。

on.load.add(...) 构造基本上分配了一个函数（通常称为处理程序），该函数将在浏览器加载图像时执行。如果没有分配这样的函数，则加载图像时不会发生任何事情，因此 context.drawImage(image, 0, 0) 将不起作用。

您的第二个问题与此功能有关。加载图像是一个异步过程，这意味着您的加载处理程序 (on.load.add(...)) 在客户端成功加载图像时首先被触发。这意味着在加载您的加载处理程序执行后继续执行您的下一个调用： print(loaded) 这将是错误的，因为图像尚未加载。

【讨论】：

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

【讨论】：