在完全填充之前防止渲染 fabric-js 画布

喜仓

在 FabricJS canvas.loadFromJSON() 中,即使未指定,似乎也运行某种 renderAll 函数?由于我既从 JSON 加载图像,也从另一个函数加载一些图像,我希望画布保持空白,直到加载完所有内容,然后同时渲染所有内容。

我用简化版本创建了一个简短的小提琴: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 速度的站点,它既回答了我的问题,也解决了我的问题。

通过输出loadFromJSONfabric.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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

画布旋转 - Fabric js

来自分类Dev

SVG无法使用Fabric.js在画布上正确渲染

来自分类Dev

Fabric.js画布图像抗锯齿

来自分类Dev

在Fabric.js中全屏显示画布

来自分类Dev

缩放fabric.js画布对象

来自分类Dev

Fabric.js画布混合模式

来自分类Dev

保存用fabric.js创建的画布

来自分类Dev

使用fabric.js的全屏画布模式

来自分类Dev

Fabric.js画布上的GIF动画

来自分类Dev

如何使用Fabric.js实现画布平移

来自分类Dev

Fabric.js在画布上的图像上分层文本

来自分类Dev

使用Fabric.js选择画布上的所有对象

来自分类Dev

使用fabric.js在画布上免费绘制

来自分类Dev

调整画布的背景图像大小-Fabric.js

来自分类Dev

Fabric.js橡皮擦问题画布

来自分类Dev

fabric.js画布监听键盘事件吗?

来自分类Dev

单击Fabric.js画布时如何获取图像的src?

来自分类Dev

iPad和iPhone中的Fabric.js画布闪烁

来自分类Dev

Canvas / Fabric.js .loadFromJSON()替换整个画布

来自分类Dev

如何使用按钮从Fabric.js画布中删除图像

来自分类Dev

Fabric.js-淡出对象并从画布中删除

来自分类Dev

fabric.js调整画布大小以适合屏幕

来自分类Dev

使用Fabric.js启用和禁用画布的鼠标事件

来自分类Dev

如何在画布上更改SVG颜色-Fabric.js

来自分类Dev

Fabric.js画布选择位置不正确

来自分类Dev

Fabric.js中彼此重叠的两个画布

来自分类Dev

iPad和iPhone中的Fabric.js画布闪烁

来自分类Dev

如何使用按钮从Fabric.js画布中删除图像

来自分类Dev

无法在画布上添加新对象(fabric.js)