我用简化版本创建了一个简短的小提琴:https : //jsfiddle.net/Xikura/cas6j7b3/168/
小提琴切换其中一层,然后重绘画布,特别是如果您禁用缓存,您可以看到道具自己显示,然后稍后显示其余图像。有人可能会说,但当有 10 到 30 张具有各种混合设置的图像时,加载可能需要一些时间,直到常见图像开始被缓存,在早期可见的道具上移动对我的解决方案没有多大好处...
我看到loadFromJSON的文档在它的回调中添加了 renderAll() ,我改为在同一个回调中触发我自己的预加载图像,以便能够添加其他图像。
if (!jsonCanvas) {
// First load
preload(images);
} else {
// Loading from saved JSON
canvas.loadFromJSON(jsonCanvas, function () {
preload(images);
});
}
现在我似乎无法理解为什么 loadFromJSON 似乎会触发某种渲染以便首先显示道具?在我自己使用 renderAll() 触发渲染之前,FabricJS 是否有任何可以用来阻止渲染的功能?
我找到了人们认为可以解决这个问题的FabricJS设置:我设置为 false 的renderOnAddRemove,它确实修复了我之前遇到的一些其他渲染困难,但对 loadFromJSON 部分没有影响。
所以我一直在为此工作一整天,但在完成我的问题后,我决定休息一下,继续解决其他问题。在尝试优化我的应用程序的性能时,我偶然发现了这个提高 FabricJS 速度的站点,它既回答了我的问题,也解决了我的问题。
通过输出loadFromJSON与fabric.util.enlivenObjects我能触发我自己的回调,而不是(无证?)canvas.renderAll()这loadFromJSON电话。
if (!jsonCanvas) {
// First load
preload(images);
} else {
// Loading from saved JSON
fabric.util.enlivenObjects(jsonCanvas.objects, (objs) => {
objs.forEach((item) => {
canvas.add(item);
});
preload(images);
})
}
我更新了我的小提琴以包含此修复程序。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句