在我的应用程序中,我有多个 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 浏览器崩溃,我认为这是内存问题。
最佳答案
您可能对 3 件事感兴趣(按重要性/破坏的顺序):
canvas.clear()
— 从中删除所有 Canvas 对象。canvas.dispose()
— 删除所有 Canvas 对象并删除所有事件监听器$(canvas.wrapperEl).remove()
(使用 jQuery 进行说明)— 删除 Canvas 包装元素(包含 Fabric 使用的上下 Canvas )。如果目标是从文档中完全删除 Fabric Canvas ,则可以在调用 dispose 之后完成。
关于javascript - 如何在多个 fabric js Canvas 的情况下管理内存?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19030174/