如何在多个fabric js canvas的情况下管理内存？ [英] How to manage memory in case of multiple fabric js canvas?

问题描述

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

In my application, I have multiple Fabric.js canvases, There is no limit on the number of canvases. I'll render heavy JSON via loadFromJson method of Fabric.js.

所以我想发布如果画布未使用，则为fabric对象内存。我该怎么做？

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

At a time only one canvas will be visible. But I have to render all the canvases as the page loads. Canvas is actually a page and user can switch between pages via clicking on page number or something else.

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

Remember user can come back to any canvas any time and try to doodle or use any other Fabric.js functionality.

这是我的HTML结构：

Here is my HTML structure:

<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代码

My JS code to store fabric instances

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

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

I am storing instances so that I can use them later. I want this for better memory management, basically loading and unloading instances as and when needed.

示例情况 DEMO 就在这里。在本演示中，考虑使用z-index将画布相互覆盖，但它们是DOM的一部分，并且已经在页面加载时呈现。

Sample situation DEMO is here. In this demo consider that the canvases are over each other using z-indexes but they are the part of DOM and has already been rendered on page load.

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

Let me know in case of any doubt, I can explain further.

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

When ever there are more than 5 canvases iPad browser crashes which I think is the memory issue.

推荐答案

您可能对3件事感兴趣（按顺序排列）意义/破坏）：

You might be interested in 3 things (in the order of significance/destruction):

1. canvas.clear（） - 删除来自它的所有画布对象。

1. canvas.clear() — removes all canvas objects from it.

canvas.dispose（） - 删除所有画布对象并删除所有事件监听器

canvas.dispose() — removes all canvas objects AND removes all event listeners

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

$(canvas.wrapperEl).remove() (using jQuery for illustrative purposes) — to remove canvas wrapper element (which contains upper and lower canvases used by Fabric). This can be done AFTER you call dispose, if the goal is to completely remove Fabric canvas from a document.

这篇关于如何在多个fabric js canvas的情况下管理内存？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！