織物 js loadFromJSON 問題

Question

我正在研究這個圖形可視化工具。 以下是我正在做的示例代碼。 首先，我創建了新畫布，並且有一個簡單的 jQuery 單擊事件將圖像對象添加到畫布。在此畫布上工作后，我需要從數據庫加載數據，我設法通過默認支持的“序列化”將數據保存在數據庫中通過fabric-js。 並將數據作為 json 對象檢索以加載到畫布中。 我想要的是完全刪除當前的工作畫布並加載一個新的數據庫檢索數據。 所以這里是我到目前為止所做的......

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

});
})();

這里假設“canvas_data”是來自數據庫的數據。 問題是當我從一個對象加載數據時，它正確地出現在畫布上，但一旦我點擊它們，它們就會消失。

我認為因為 main 函數在 onLoad 上運行，所以當我點擊它時會觸發 main 函數並加載以前的畫布。 我想要的是清除舊畫布並使用數據庫數據加載新畫布。 請幫忙。 他們說“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));

});