FabricJS：如何阻止Canvas提前渲染，待全部内容加载后统一渲染？

你遇到的这个问题确实是FabricJS的默认行为——loadFromJSON方法默认会在加载完成后自动调用renderAll()，哪怕你设置了renderOnAddRemove: false也没用，因为这个配置只影响手动添加/移除元素时的渲染，而loadFromJSON内部是直接触发渲染的。不过好在FabricJS提供了参数可以控制这个行为，结合Promise就能实现“所有资源加载完再统一渲染”的需求，具体步骤如下：

1. 关闭自动渲染的关键配置 #

首先初始化Canvas时，保持renderOnAddRemove: false，避免后续添加元素时自动触发渲染：

const canvas = new fabric.Canvas('yourCanvasId', {
  renderOnAddRemove: false
});

然后调用loadFromJSON时，一定要传入第三个参数（配置选项），把render设为false，这样就能阻止加载完成后的自动渲染：

canvas.loadFromJSON(jsonCanvas, () => {
  // JSON加载完成后的后续逻辑
}, { render: false }); // 核心：关闭loadFromJSON的自动渲染

2. 统一控制所有资源的加载与渲染 #

接下来需要把你的预加载图像逻辑包装成Promise，这样才能精准知道所有图像什么时候加载完成。比如修改你的preload函数：

function preload(imageSources) {
  // 用Promise.all等待所有图像加载完成
  return Promise.all(imageSources.map(src => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => {
        // 创建Fabric图像并添加到Canvas（此时不会自动渲染）
        const fabricImage = new fabric.Image(img);
        canvas.add(fabricImage);
        resolve();
      };
      img.onerror = reject;
      img.src = src;
    });
  }));
}

然后在loadFromJSON的回调里，等待预加载完成后手动调用renderAll()：

if (!jsonCanvas) {
  // 首次加载：直接预加载后渲染
  preload(images).then(() => {
    canvas.renderAll();
  });
} else {
  // 加载保存的JSON：先加载JSON，再预加载图像，最后统一渲染
  canvas.loadFromJSON(jsonCanvas, () => {
    preload(images).then(() => {
      canvas.renderAll();
    });
  }, { render: false });
}

原理说明 #

FabricJS的loadFromJSON方法的第三个配置参数里，render属性默认值是true，方法内部会在执行完回调前自动调用renderAll()。将它设为false后，JSON里的元素会被添加到Canvas，但不会触发渲染。再结合renderOnAddRemove: false，确保后续添加预加载的图像时也不会自动渲染，最后通过手动调用renderAll()完成一次性渲染，就能避免中间状态的显示问题了。

内容的提问来源于stack exchange，提问作者Xikura