8

在我的应用程序中，我有多个Fabric.js画布，画布的数量没有限制。我将通过loadFromJsonFabric.js 的方法渲染重型 JSON。

因此，如果不使用画布，我想释放织物对象内存。我怎样才能做到这一点？

一次只能看到一个画布。但是我必须在页面加载时渲染所有画布。画布实际上是一个页面，用户可以通过点击页码或其他方式在页面之间切换。

请记住，用户可以随时回到任何画布并尝试涂鸦或使用任何其他 Fabric.js 功能。

这是我的 HTML 结构：

<style>
 .fabricCanvas {
   border: 1px solid green;
   margin: 5px;
 }

 .canvas-container {
    margin: 5px;    
 }
</style>
<canvas class="fabricCanvas" width="300" height="300"></canvas>
<canvas class="fabricCanvas" width="300" height="300"></canvas>
<canvas class="fabricCanvas" width="300" height="300"></canvas>
<canvas class="fabricCanvas" width="300" height="300"></canvas>

我存储结构实例的 JS 代码

var canvasInstances = [];
$('canvas.fabricCanvas').each(function () {
  var fabricCanvasObj = new fabric.Canvas(this, {
  isDrawingMode: true
});
  canvasInstances.push(fabricCanvasObj);
  fabricCanvasObj.renderAll();
});
console.log(canvasInstances[0]);

我正在存储实例，以便以后可以使用它们。我希望这是为了更好的内存管理，基本上是在需要时加载和卸载实例。

示例情况演示在这里。在这个演示中，考虑到画布使用 z-indexes 相互重叠，但它们是 DOM 的一部分，并且已经在页面加载时呈现。

如有任何疑问，请告诉我，我可以进一步解释。

当有超过 5 个画布时 iPad 浏览器崩溃，我认为这是内存问题。

4

1 回答 1

18

您可能对 3 件事感兴趣（按重要性/破坏的顺序）：

  1. canvas.clear()— 从中移除所有画布对象。

  2. canvas.dispose()— 移除所有画布对象并移除所有事件监听器

  3. $(canvas.wrapperEl).remove()（使用 jQuery 进行说明） — 删除画布包装元素（包含 Fabric 使用的上下画布）。这可以在您调用 dispose 之后完成，如果目标是从文档中完全删除 Fabric 画布。

于 2013-09-27T22:37:48.870 回答