如何使用Dart lang中的图像

Question

我之前在这里发布了一个问题(如何在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

^^^为什么我弄错了？如果加载的图像加载变量变为true,则我被创建,但加载不会变为true.

抱歉我的英语不好.谢谢!

Answer 1

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

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

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

所述on.load.add(...)构造基本上分配当浏览器加载图像将要执行的函数(通常被称为一个处理程序).如果没有指定这样的函数,则在加载图像时没有任何反应,因此context.drawImage(image,0,0)将不起作用.

您的第二个问题与此功能有关.加载图像是一个异步过程,这意味着当客户端成功加载图像时,首先会触发加载处理程序(on.load.add(...)).这意味着在给你的加载处理程序执行后继续执行下一次调用:print(loaded),因为图像尚未加载,所以这将是假的.

Answer 2

较新的图像onload语法:

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