我怀疑答案就在 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.
最佳答案
当您调用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
关于javascript - CreateJS - 图像位图并不总是显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41624503/