vue fabric 从Json数据还原object 并在 canvas画布上显示

代码：

fabric.util.enlivenObjects([data.value], (objects) => {
        var origRenderOnAddRemove = this.canvasObj.renderOnAddRemove
        this.canvasObj.renderOnAddRemove = false

        objects.forEach((o) => {
          this.canvasObj.add(o)
        })
        this.canvasObj.renderOnAddRemove = origRenderOnAddRemove
        this.canvasObj.renderAll()
      })

其中，data.value是我从后端拿来的json数据，而该数据是从前端fabric object 转化成的json。这样就可以实现从前端保存之后再还原。

data.value可以换成其他json文件，比如下面的代码配合上述代码，可以还原两个圆圈：

var circle1 = {
        type: 'circle',
        originX: 'center',
        originY: 'center',
        left: 100,
        top: 60,
        width: 160,
        height: 160,
        fill: '',
        overlayFill: null,
        stroke: 'rgb(0,0,0)',
        strokeWidth: 5,
        strokeDashArray: null,
        scaleX: 1,
        scaleY: 0.7,
        angle: 0,
        flipX: false,
        flipY: false,
        opacity: 1,
        selectable: true,
        hasControls: true,
        hasBorders: true,
        hasRotatingPoint: true,
        transparentCorners: true,
        perPixelTargetFind: false,
        shadow: null,
        visible: true,
        radius: 80,
        XZIndex: 60
      }

      var circle2 = {
        type: 'circle',
        XZIndex: 80,
        originX: 'center',
        originY: 'center',
        left: 100,
        top: 140,
        width: 160,
        height: 160,
        fill: '',
        overlayFill: null,
        stroke: 'rgb(255,0,0)',
        strokeWidth: 5,
        strokeDashArray: null,
        scaleX: 1,
        scaleY: 0.7,
        angle: 0,
        flipX: false,
        flipY: false,
        opacity: 1,
        selectable: true,
        hasControls: true,
        hasBorders: true,
        hasRotatingPoint: true,
        transparentCorners: true,
        perPixelTargetFind: false,
        shadow: null,
        visible: true,
        radius: 80
      }