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 + 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。除了非常骇人听闻之外，即使有很大的延迟，它也只能在一定比例的时间内修复它。
  • 像这样的答案。这适用于硬重置，但是当我清除缓存时加载时间过长，基本上破坏了修复第一次加载的整个想法。

因此，基本上，虽然其中一些解决方案在某些时候有效，但有些是骇人听闻的，而且都只能在一定比例或更少的时间内有效。什么是最好的解决方案？

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

注意：我不认为这是这个问题的重复，因为没有答案，它已经有一年了，他们无法提供一些细节，并且评论中提供的唯一解决方案失败了。

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

这是一个更完整的答案：画架不显示位图

于 2017-01-13T16:27:42.850 回答