相关疑难解决方法(0)

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

因此,如果画布未使用,我想释放结构对象内存.我怎样才能做到这一点？

一次只能看到一个画布.但是我必须在页面加载时渲染所有画布.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就在这里.在本演示中,考虑使用z-index将画布相互覆盖,但它们是DOM的一部分,并且已经在页面加载时呈现.

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

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