2

以前にここに質問を投稿して（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 にならない。

私の悪い英語で申し訳ありません。ありがとう！

4

2 に答える 2

6

最初の質問については、省略した場合

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

画像が読み込まれるときにコードは実行されません。

on.load.add (...)構造は基本的に、ブラウザーが画像をロードするときに実行される関数 (ハンドラーと呼ばれることが多い) を割り当てます。そのような関数が割り当てられていない場合、画像がロードされても何も起こらず、結果としてcontext.drawImage(image, 0, 0)は機能しません。

2 番目の質問は、この機能に関するものです。画像の読み込みは非同期プロセスです。つまり、クライアントが画像を正常に読み込んだときに、読み込み時のハンドラー ( on.load.add(...) ) が最初に起動されます。これは、オンロード ハンドラの実行を割り当てた後、次の呼び出しprint(loaded)に進むことを意味します。これは、画像がまだロードされていないため false になります。

于 2012-07-23T18:34:26.427 に答える
5

新しいイメージ オンロード構文:

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");
}
于 2013-06-01T20:37:35.723 に答える