CreateJS - 图像位图始终不显示

Question

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

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

所以现在出现问题，这是你第一次运行我的代码后得到的结果：

没错。

但是，第一次访问时，图像尚未缓存，未显示。当你硬重置页面时（ctrl + r在Windows上）会发生同样的事情。这显然是一个大问题，因为当您第一次访问该页面时，它将没有图像。这是我尝试过的：

• 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。这将适用于硬复位，但是当我清除缓存时，加载时间太长，基本上破坏了修复第一次加载的整个想法。

所以基本上虽然这些解决方案中的一些虽然在某些时候有效，但有些是hackish并且所有工作只有一个百分比或更少的时间。什么是最好的解决方案？

有一件事是，当我做某些事情时，例如调整页面大小，图像会显示出来。我无法在我的示例代码中重新创建它。我相信这是因为当我最初运行stage.update时，它还没有准备好显示，所以它没有。再一次只是在一秒钟之后再次运行stage.update还不够好。

  

注意：我不相信这是question的副本，因为没有答案，它已经有一年了，他们无法提供一些细节，而且只有评论中提供的解决方案失败。

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