Fabric.js：不从 JSON 加载包含 SVG 的组

【问题标题】：Fabric.js : not load groups that contain SVG from JSONFabric.js：不从 JSON 加载包含 SVG 的组
【发布时间】：2022-01-16 23:00:35
【问题描述】：

我想用 SVG 对文本进行分组，但包含 SVG 的组不能从 json 恢复，我的代码是：

let canvas = new fabric.Canvas(this.$refs.canvas);
      let waitSvgLoad = new Promise((resolve)=>{
      fabric.loadSVGFromURL(require('@/assets/img/desk.svg'), objects => {
         let obj = fabric.util.groupSVGElements(objects, {
         top: 30,
         left: 30,
       })
      resolve(obj)
      })
})
waitSvgLoad.then((svg)=>{
   let text = new fabric.Text('test', {
   left: 20,
   top: 20
    })
  let group = new fabric.Group([ text ,svg], {
  left: 150,
  top: 100,
});
canvas.add(group)
canvas.clear()
let jsontest = JSON.stringify(canvas)
canvas.loadFromJSON(jsontest)
canvas.renderAll.bind(canvas)
})

【问题讨论】：

标签： fabricjs

【解决方案1】：

感谢 krillea...@gmail.com 在 google 小组中帮助我 https://groups.google.com/g/fabricjs/c/n5ngMPSiYNs 我调试项目并确定以下代码是问题所在：

fabric.Object.prototype.toObject = (function(toObject) {
    return function() {
       return fabric.util.object.extend(toObject.call(this), {
          selectable: this.selectable,
          hasControls: this.hasControls,
          deskId: this.deskId,
          typeShape: this.typeShape
})
}
})(fabric.Object.prototype.toObject)

事实上，自定义属性是问题所在，所以我将顶部代码替换为：

JSON.stringify(this.canvas.toJSON(['_controlsVisibility','deskId','typeShape']))

解决了我的问题

【讨论】：