Question

我希望能够记录并捕获我的Fabric.js canvas及其最新更改。目前，使用console.log(JSON.stringify(canvas));，我可以看到它推动背景颜色，但不是其他任何东西，比如我添加的图纸等。

这是可能的，如果可以的话，我怎么能做到这一点？

＆＃13;

var canvas = this.__canvas = new fabric.Canvas('canvas', {
  backgroundColor: 'white',
  centeredScaling: true,
  isDrawingMode: true
});

console.log(JSON.stringify(canvas));

＆＃13;

body {
}

canvas {
  border-radius: 2px;
  margin: 5px;
  border:1px solid #000000;
}

＆＃13;

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

＆＃13;

旁白：

我的最终目标是最终能够将此JSON重新加载到画布上，所以我想学习如何将最新的对象放入JSON中开始。我在右边追踪还是我误解了这个？

提前致谢。

Answer 1

使用toJSON制作画布的JSON并使用loadFromJSON重新加载。

<强> 样本

var canvas = new fabric.Canvas('canvas', {
  backgroundColor: 'white',
  centeredScaling: true,
  isDrawingMode: true
});

var canvas1 = new fabric.Canvas('canvas1');

function loadOnCanvas(){
 var json = canvas.toJSON();
 console.log(json)
 canvas1.loadFromJSON(json,canvas1.renderAll.bind(canvas1));
}

body {
}

canvas {
  border-radius: 2px;
  margin: 5px;
  border:1px solid #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<button onclick='loadOnCanvas()'>Load</button>
<canvas id="canvas" height="400" width="400"></canvas><br>
<canvas id="canvas1" height="400" width="400"></canvas>

更新JSON.stringify（canvas）;最新的画布更改

1 个答案: