ファブリックjs loadFromJSON問題

Question

私はこのグラフィックビジュアライザで作業しています。以下は、私がやっていることの例のコードです。 最初に新しいキャンバスを作成し、カンバスにイメージオブジェクトを追加する単純なjQueryのクリックイベントがあります。このキャンバスで作業した後、データベースからデータをロードする必要があります。デフォルトでは「シリアル化」によってデータをデータベースに保存していますファブリックjsによるサポート。キャンバスに読み込むjsonオブジェクトとしてデータを取得します。私が望むのは、現在の作業用キャンバスを完全に削除し、データベースで取得したデータを新しいものにロードすることです。ので、ここで私はこれまで何をやったか...

（関数（）{

var canvasOffsetHeight = '400'; 
var canvasOffsetWidth = '600'; 

var canvas = new fabric.Canvas('canvas'); 

window.addEventListener('resize', resizeCanvas, false); 

function resizeCanvas() { 
    canvas.setHeight(canvasOffsetHeight); 
    canvas.setWidth(canvasOffsetWidth); 
    canvas.renderAll(); 
} 
// resize on init 
resizeCanvas(); 

jQuery('.category ul').on('click', 'li', function (e) { 
    var imgElement = jQuery(this).children("img")[0]; 

    var imgInstance = new fabric.Image(imgElement, { 
     left: 100, 
     top: 100, 
     angle: 0, 
     opacity: 1 
    }); 
    canvas.add(imgInstance); 
    canvas.renderAll(); 

    return false; 

}); 

jQuery('#obj').click(function(){ 

    canvas_data = '{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}'; 

    var canvas = new fabric.Canvas('canvas'); 

    canvas.loadFromJSON(canvas_data,canvas.renderAll.bind(canvas)); 

}); 

}）（）;

ここでは、「canvas_data」はデータベースのデータです。 問題はキャンバスに正しく表示されるオブジェクトからデータをロードするときですが、すぐにクリックすると消えてしまいます。

メイン関数はonLoadを実行するので、クリックするとメイン関数がトリガーされ、以前のキャンバスが読み込まれると思います。私が望むのは、古いキャンバスを一掃し、データベースデータで新しいキャンバスを読み込むことです。助けてください。 「loadFromJSON」は自動的にこれを行いますが、私にとってはうまくいかないようです。

Answer 1

別のキャンバスオブジェクトを作成する必要はありません。 ＃obj.clickのコードは次のようになります。

jQuery('#obj').click(function(){ 

    canvas_data = '{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}'; 



    canvas.loadFromJSON(canvas_data,canvas.renderAll.bind(canvas)); 

});