fabric js loadFromJSON 문제

Question

이 그래픽 비주얼 라이저 작업 중입니다. 다음은 내가하는 일의 예제 코드이다. 먼저 새 캔버스를 만들고 canvas에 이미지 객체를 추가하는 간단한 jQuery 클릭 이벤트가 있습니다.이 캔버스에서 작업 한 후 데이터베이스에서 데이터를로드해야합니다. 데이터베이스의 데이터를 "Serialization"기본값으로 저장했습니다. fabric-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)); 

});