0

答えはPreloadJsにあると思いますが、単純化するために、コードでそれをいじくり回す作業を削除しました。最も重要な部分は次のとおりです。

let stage = new createjs.Stage('easel'),
bitmap = new createjs.Bitmap('http://www.skrenta.com/images/stackoverflow.jpg');
stage.addChild(bitmap);
stage.update();

さて、問題は、これが私のコードを初めて実行したときに得られるものです。

オリジナル

何も間違ってない。

ただし、最初にアクセスしたときは、画像はまだキャッシュされておらず、表示されません。ページをハードリセットした場合も同じことが起こります（ctrl + rWindowsの場合）。初めてページにアクセスしたときは画像がないため、これは明らかに大きな問題です。これが私が試したことです：

  • PreloadJs、これが解決策になる可能性が最も高いですが、これまでのコードでは機能していません。

    • これは私の現在のPreloadJSコードです：

      queue.on('complete', draw, this)
queue.load(imageUrl)

function draw() {
  let bitmap = new createjs.Bitmap(imageUrl);
  stage.addChild(bitmap);
  stage.update();
}

  • 私のコードをトリガーしますonload。問題はまだ発生します。

  • のような遅延setTimeout。非常にハックであることに加えて、大幅な遅延があっても、一定の確率でしか修正されません。
  • この回答のようなもの。これはハード リセットには機能しますが、キャッシュをクリアすると、ロードに時間がかかりすぎて、基本的に最初のロードを修正するというアイデア全体が台無しになりました。

したがって、基本的に、これらのソリューションのいくつかは時々機能しますが、一部はハックであり、すべてがパーセンテージまたはそれ以下の時間しか機能しません。最善の解決策は何ですか？

1 つのことは、ページのサイズを変更するなどの操作を行うと、画像が表示されることです。サンプル コードでこれを再現できませんでした。これは、最初に実行したときにstage.update表示する準備ができていなかったため、表示されなかったために発生したと思います。繰り返しますが、1 秒後にもう一度実行するだけstage.updateでは十分ではありません。

注：回答がなく、1年前であり、詳細を提供できず、コメントで提供された唯一の解決策が失敗したため、これがこの質問の複製であるとは思いません。

4

1 に答える 1

1

を呼び出しても、画像はロードされませんstage.update。プリロードしても、Bitmap に文字列パスを渡すと、初期化にまだ時間がかかりますが、ほんの数ミリ秒であっても、準備が整う前にステージに描画を依頼したことになります。

解決策は、画像が完成したら描画し、文字列パスの代わりに画像を使用することです。

コードを修正するには:

let stage = new createjs.Stage('easel'),
bitmap = new createjs.Bitmap('http://www.skrenta.com/images/stackoverflow.jpg');
stage.addChild(bitmap);
bitmap.image.onload = function() {
    stage.update();
}

プリロード コードを修正するには:

queue.on('complete', draw, this)
queue.load(imageUrl)

function draw() {
  let bitmap = new createjs.Bitmap(queue.getResult("imgId")); // Reference
  stage.addChild(bitmap);
  stage.update();
}

より完全な答えは次のとおりです。easeljsがビットマップを表示していません

于 2017-01-13T16:27:42.850 に答える