检测加载的 Pixi 画布图像答案

【问题标题】：Detect Pixi canvas images loaded检测加载的 Pixi 画布图像
【发布时间】：2017-06-20 22:24:01
【问题描述】：

我正在开发 PixiJS 应用程序，我在其中装扮我的角色。因此，不同的 PNG 图像被加载到 Pixi 阶段。

有一个完成角色修饰的按钮，它使用 .toDataURL() 方法保存当前画布。

问题是用户可以单击更改例如 T 恤，而在更改 T 恤时，他可以单击完成按钮，但如果 T 恤未完全加载，则会在没有 T 恤的情况下保存画布。

当我的修整功能完成时，我已经做了 JS 回调来解锁完成按钮。

问题是javascript代码成功完成并替换画布图像，但图像需要几秒/毫秒（取决于互联网速度）才能加载。

在此期间，如果用户单击完成按钮，可能会导致画布不完整。

有什么方法可以检测到画布图像是否已完全加载？

非常感谢您！

乔斯普

【问题讨论】：

【解决方案1】：

在将图像插入画布之前，您只需使用图像加载器并确保浏览器已加载了 png 图像。所以使用这个：http://pixijs.download/release/docs/PIXI.loaders.Loader.html

【讨论】：

感谢 Hachi 的回答。创建加载器后，我尝试使用 loader.load() 添加图像，然后调用 loader.once('complete', unlockFinishButton) 来解锁我的完成按钮？ unlockFinishButton 在浏览器加载我的图像之前完成。可能我不太了解你和装载机。 ?
抱歉有点慢。加载器使用 html 图像元素加载资源。所以浏览器已经加载了它们，当加载器完成时。至少我没有真正看到那里可能存在的问题。您能否在 plunkr (plnkr.co) 或 jsfiddle 中为我提供一个小脚本，我可以尝试在那里检查和调试它吗？会更容易，因为加载程序应该解决问题，除非我误解了这个问题，这也应该告诉你。
是的，加载程序解决了我的问题。我使用加载器加载所有图像，然后 loader.once('complete', callback) -> 在回调中我从加载器资源创建我的精灵并将它们添加到舞台。