Fabric js loadFromJSON Problem

Question

Ich arbeite an diesem grafischen Visualizer. Folgendes ist ein Beispielcode von dem, was ich tue. zuerst ich neue Leinwand erstellen und es gibt ein einfaches jQuery click -Ereignis, um Bildobjekte zu canvas.and hinzuzufügen, und nach der Arbeit auf dieser Leinwand muss ich Daten aus der Datenbank laden, ich habe es geschafft, Daten in der Datenbank durch "Serialisierung" zu speichern Unterstützung durch Fabric-js. und Daten als json-Objekt abrufen, um sie in den Canvas-Bereich zu laden. Was ich will, ist, die aktuelle Arbeitsfläche vollständig zu entfernen und eine neue Datenbank mit abgerufenen Daten zu laden. so hier, was ich bisher ...

(function() {

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)); 

}); 

})() getan haben;

hier nehmen wir an "canvas_data" ist die Daten aus der Datenbank. Das Problem ist, wenn ich Daten von einem Objekt laden, erscheint es korrekt auf der Leinwand, aber sobald ich auf sie klicke, verschwinden sie einfach.

ich denke, weil Hauptfunktion onLoad ausgeführt wird, wenn ich es klicke, löst die Hauptfunktion aus und lädt die vorherige Leinwand. Was ich will ist, alte Leinwand zu löschen und neue mit Datenbankdaten zu laden. bitte hilfe. sagen sie "loadFromJSON" automatisch dies für uns, aber es scheint nicht für mich arbeiten.

Answer 1

Keine Notwendigkeit, ein anderes Canvas-Objekt zu erstellen. Ihr Code im # obj.click wird also:

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)); 

});