FabricJS如何重新添加字符串化json對象（反序列化）

Question

我有一個JSON格式的畫布對象。

{"type":"rect", 
"originX":"left", 
"originY":"top", 
"left":100, 
"top":100, 
"width":200, 
"height":200, 
"fill":"blue", 
"stroke":null, 
"strokeWidth":1, 
"strokeDashArray":null, 
"strokeLineCap":"butt", 
"strokeLineJoin":"miter", 
"strokeMiterLimit":10, 
"scaleX":1,"scaleY":1, 
"angle":0, 
"flipX":false, 
"flipY":false, 
"opacity」:1, 
」shadow":null, 
"visible":true, 
"clipTo":null, 
"backgroundColor":"", 
"fillRule":"nonzero", 
"globalCompositeOperation":"source-over", 
"transformMatrix":null, 
"skewX":0, 
"skewY":0, 
"rx":0, 
"ry":0} 

如何反序列化這個對象使用canvas.add()重新添加它？

我不想使用canvas.loadFromJSON()，因爲它會清除當前的畫布內容。

Answer 1

是的不幸的是canvas.loadFromJSON（）首先清除畫布。你可以嘗試這樣的事：

var canvas; 
 

 
     var json = '{"objects": [{"type":"rect", "left":100, "top":100, "width":200, "height":200, "fill":"blue"}]}'; 
 
     canvas = new fabric.Canvas('c'); 
 

 
     // Create an object to show that this doesn't get overwritten when we load the JSON 
 
     var circle = new fabric.Circle({ 
 
      radius: 50, fill: 'green', left: 50, top: 50 
 
     }); 
 
     canvas.add(circle); 
 
     canvas.renderAll(); 
 

 
     // Parse JSON and add objects to canvas 
 
     var jsonObj = JSON.parse(json); 
 
     fabric.util.enlivenObjects(jsonObj.objects, function (enlivenedObjects) { 
 
      enlivenedObjects.forEach(function (obj, index) { 
 
       canvas.add(obj); 
 
      }); 
 
      canvas.renderAll(); 
 
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 

 
<canvas id="c" width="600" height="400"> </canvas>

或者只是一個對象：

var json = '{"type":"rect", "left":100, "top":100, "width":200, "height":200, "fill":"blue"}'; 
 
     canvas = new fabric.Canvas('c'); 
 

 
     // Create an object to show that this doesn't get overwritten when we load the JSON 
 
     var circle = new fabric.Circle({ 
 
      radius: 50, fill: 'green', left: 50, top: 50 
 
     }); 
 
     canvas.add(circle); 
 
     canvas.renderAll(); 
 

 
     // Parse JSON and single object to canvas 
 
     var jsonObj = JSON.parse(json); 
 
     fabric.util.enlivenObjects([jsonObj], function (enlivenedObjects) { 
 
      canvas.add(enlivenedObjects[0]); 
 
      canvas.renderAll(); 
 
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 
    <canvas id="c" width="600" height="400"></canvas>