加載此JSON有什麼問題？

Question

加載此JSON有什麼問題？ 選擇一個新對象，設置它的ID，添加並保存它。試圖重新加載JSON對象會導致一個空的畫布。

http://jsfiddle.net/Sugv4/14/

function loadCanvas() { 
    canvas.clear(); 
    window.alert(js); 

    canvas.loadFromDatalessJSON(js) 
    canvas.renderAll(); 
} 

Answer 1

儘量把這個JavaScript代碼：

var canvas; 
$(function() { 
    canvas = window._canvas = new fabric.Canvas('c'); 

    fabric.Labeledrect = fabric.util.createClass(fabric.Rect, { 
     type: 'labeledRect', 
     initialize: function (options) { 
      options || (options = {}); 
      this.callSuper('initialize', options); 
      this.set('label', options.label); 
      this.set('id', options.id); 
     }, 
     toObject: function() { 
      return fabric.util.object.extend(this.callSuper('toObject'), { 
       label: this.get('label'), 
       id: this.get('id') 
      }); 
     }, 
     _render: function (ctx) { 
      this.callSuper('_render', ctx); 
      ctx.font = '10px Helvetica'; 
      ctx.fillStyle = '#333'; 
      ctx.fillText(this.label, -this.width/2, -this.height/2 + 10); 
      ctx.fillText(this.id, -this.width/2, -this.height/2 + 30); 
     } 

    }); 

    fabric.Labeledrect.fromObject = function (object, callback) { 
     return new fabric.Labeledrect(object); 
    } 
    fabric.Labeledrect.async = true; 
}); 




function voegObjectToe() { 

    var myObjects = document.getElementById("myObjects"); 
    var kenmerk = myObjects.options[myObjects.selectedIndex].text; 


    //nieuw object 
    var rect = new fabric.Labeledrect({ 
     left: canvas.width/2, 
     top: canvas.height/2 

    }); 

    if (kenmerk == 'Camper') { 
     rect.set({ 
      width: 80, 
      height: 50, 
      fill: '#faa', 
      label: 'Camper', 
      id: document.getElementById("myObject").value 
     }); 

    } else if (kenmerk == 'Caravan') { 
     rect.set({ 
      width: 80, 
      height: 60, 
      fill: '#3ac', 
      label: 'Caravan', 
      id: document.getElementById("myObject").value 
     }); 
    } else if (kenmerk == 'Auto') { 
     rect.set({ 
      width: 70, 
      height: 40, 
      fill: '#bbb', 
      label: 'Auto', 
      id: document.getElementById("myObject").value 
     }); 
    } else if (kenmerk == "Boot") { 
     rect.set({ 
      width: 150, 
      height: 60, 
      fill: '#8d1', 
      label: 'Boot', 
      id: document.getElementById("myObject").value 
     }); 

    } 
    canvas.add(rect); 
    rect.set({ 
     label: kenmerk + ' ' + rect.width * 7 + ' cm', 
     rx: 8, 
     ry: 8 
    }); 
    canvas.renderAll(); 

} 


function saveCanvas() { 
    js = JSON.stringify(canvas.toDatalessJSON()); 

} 

function loadCanvas() { 
    //window.alert(js); 

    canvas.clear(); 
    canvas.loadFromDatalessJSON(js); 
    canvas.renderAll(); 
}