javascript - CreateJS - 图像位图并不总是显示

Question

这个问题已经有答案了:

easeljs not showing bitmap (1 个回答)

已关闭 6 年前。

我怀疑答案就在 PreloadJs 中但是，我已经在我的 code 中删除了对它的修改。来简化它。这是最重要的部分:

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

现在的问题是，这是你第一次运行我的代码时得到的结果:

没有什么问题。

但是，当您第一次访问时，图像尚未缓存，并且不会显示。当您硬重置页面时(Windows 上为 ctrl + r)，也会发生同样的情况。这显然是一件大事，因为当您第一次访问该页面时，它不会有图像。这是我尝试过的:

• 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 。除了极其黑客​​化之外，即使有巨大的延迟，它也只能修复一定比例的问题。
• 类似这样的事情 answer 。这适用于硬重置，但当我清除缓存时，加载时间太长，基本上破坏了修复第一次加载的整个想法。

所以基本上，虽然其中一些解决方案在某些时候可以工作，但有些解决方案却很糟糕，并且所有解决方案都只能在一定比例或更少的时间内工作。最好的解决方案是什么？

有一件事是，当我执行某些操作(例如调整页面大小)时，图像就会显示。我无法在示例代码中重新创建它。我相信发生这种情况是因为当我最初运行 stage.update 时它还没有准备好展示，所以它没有。再次简单地运行 stage.update一秒钟后再次还不够好。

Note: I do not believe this to be a duplicate of this question as there are no answers, it is a year old, they were unable to give some details, and the only solution offered in the comments failed.

Answer 1

当您调用stage.update时，您的图像未加载。即使你预加载它，如果你将字符串路径传递给位图，它仍然需要时间来初始化，但即使只有几毫秒，你也已经要求舞台在准备好之前进行绘制。

解决方案是在图像完成后进行绘制，并确保使用图像，而不是字符串路径。

要修复您的代码:

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 not showing bitmap