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

最新推荐文章于 2024-07-30 17:53:07 发布

noscallion

最新推荐文章于 2024-07-30 17:53:07 发布

阅读量1.2k

点赞数 1

文章标签： json html5 html

本文链接：https://blog.youkuaiyun.com/noscallion/article/details/120757286

版权

这篇博客探讨了如何使用Fabric.js库将前端保存的JSON数据还原为Canvas对象。通过`fabric.util.enlivenObjects`方法，可以将从后端获取的JSON数据（如示例中的两个圆形对象）重新添加到画布上，恢复画布的状态。这个过程涉及到前端与后端的数据交互以及Canvas对象的序列化和反序列化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

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
      }