8

私のアプリケーションには、複数のFabric.jsキャンバスがあります。キャンバスの数に制限はありません。loadFromJsonFabric.js のメソッドを使用して重い JSON をレンダリングします。

したがって、キャンバスが使用されていない場合は、ファブリック オブジェクトのメモリを解放したいと考えています。どうやってやるの？

一度に表示できるキャンバスは 1 つだけです。しかし、ページの読み込み時にすべてのキャンバスをレンダリングする必要があります。キャンバスは実際にはページであり、ユーザーはページ番号などをクリックしてページを切り替えることができます。

ユーザーはいつでも任意のキャンバスに戻って、落書きをしたり、他の 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 ブラウザがクラッシュします。これはメモリの問題だと思います。

4

1 に答える 1

18

あなたは3つのことに興味があるかもしれません（重要性/破壊の順序で）：

  1. canvas.clear()— すべてのキャンバス オブジェクトをそこから削除します。

  2. canvas.dispose()— すべてのキャンバス オブジェクトを削除し、すべてのイベント リスナーを削除します

  3. $(canvas.wrapperEl).remove()(説明目的で jQuery を使用) — キャンバス ラッパー要素 (Fabric によって使用される上下のキャンバスを含む) を削除します。これは、ドキュメントからファブリック キャンバスを完全に削除することが目標である場合は、dispose を呼び出した後に行うことができます。

于 2013-09-27T22:37:48.870 に答える