javascript - 如何在多个 fabric js Canvas 的情况下管理内存？

Question

在我的应用程序中，我有多个 Fabric.js Canvas ， Canvas 的数量没有限制。我将通过 Fabric.js 的 loadFromJson 方法呈现大量 JSON。

所以我想在 Canvas 未使用时释放结构对象内存。我该怎么做？

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

请记住，用户可以随时返回任何 Canvas 并尝试涂鸦或使用任何其他 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]);

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

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

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

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

Answer 1

您可能对 3 件事感兴趣(按重要性/破坏的顺序):

1. canvas.clear() — 从中删除所有 Canvas 对象。

2. canvas.dispose() — 删除所有 Canvas 对象并删除所有事件监听器

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