CreateJS-图像位图始终不显示

debugcn 发表于 Dev

大卫·阿奇博尔德（David Archibald）

我怀疑，答案在于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一秒钟再运行一次是不够的。

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

兰尼

调用时未加载图像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不显示位图

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。