Question

当我尝试将我的画布序列化为json并稍后使用loadFromJSON恢复它时，我遇到了问题。

以下jsfiddle只是一个较大项目的摘录，但显示了问题：

fabric.MyRect = fabric.util.createClass(fabric.Rect, {
    type: "myRect",
    initialize(options={}){
    this.callSuper("initialize", options)

    this.on("moving", function(){
        if(this.tri){
        this.tri.top = this.getTop()
        this.tri.left = this.getLeft()
        this.tri.setCoords()
      }
    })
    this.on("added", function(){        
        this.tri = new fabric.Triangle({
        left: this.getLeft(),
        top: this.getTop(),
        width: 20,
        height: 20,
        fill: "red"
      })
        this.canvas.add(this.tri)
    })
  }
})
fabric.MyRect.fromObject = function(obj){
    return new fabric.MyRect(obj)
}

let c = new fabric.Canvas("mycanvas")

c.add(new fabric.MyRect({
    top:0,
  left:0,
  width:100,
  height:100,
  fill:"green"
 }))

c.add(new fabric.MyRect({
    top:100,
  left:100,
  width:100,
  height:100,
  fill:"blue"
 }))

c.renderAll()

let canvasModel = c.toObject()
canvasModel.objects = canvasModel.objects.filter(e => e.type !== "triangle")
c.clear()
c.loadFromJSON(JSON.stringify(canvasModel), c.renderAll.bind(c))

MyRect子类在添加＆＃34;添加＆＃34;时会添加一个新的三角形。从＆＃34;对象中的画布：添加＆＃34;打回来。如果我不在画布上添加MyRect的第二个实例（第39行），一切正常，但我遇到了小提琴的问题，有两个MyRect实例。

如果您运行小提琴，两个MyRect实例都在画布上呈现，但只有一个实例在＆＃34;对象上附加了三角形：添加了＆＃34;回调。

我不确定＆＃34;对象是否已添加＆＃34;回调甚至旨在将更多对象添加到画布。但正如上文所述，这只是一个更大的应用程序的摘录，很难被重构为像Group等。

我正在使用版本：1.6.2

最近的Chrome以及Firefox都出现了问题。

非常感谢任何帮助。

最诚挚的问候，扬

Answer 1

问题是三角形没有在画布中再次添加我不知道为什么，看看小提琴我手动添加第一个三角形，因为没有添加到画布：

      fabric.MyRect = fabric.util.createClass(fabric.Rect, {
    type: "myRect",
    initialize(options={}){
      this.callSuper("initialize", options)

      this.on("moving", function(){
      console.log('tri', this.tri)
        if(this.tri){
          this.tri.top = this.getTop()
          this.tri.left = this.getLeft()
          this.tri.setCoords()
        }
      })
      this.on("added", function(){              
        this.tri = new fabric.Triangle({
          left: 0,
          top: 0,
          width: 20,
          height: 20,
          fill: "red"
        })
        this.tri.id = parseInt(Math.random() * 100000)
        console.log('add', this.tri, this.tri.id)
        this.canvas.add(this.tri)
      })
    }
  })
  fabric.MyRect.fromObject = function(obj){
    return new fabric.MyRect(obj)
  }

  window.c = new fabric.Canvas("mycanvas")

  c.add(new fabric.MyRect({
    top:0,
    left:0,
    width:100,
    height:100,
    fill:"green"
   }))

  c.add(new fabric.MyRect({
    top:100,
    left:100,
    width:100,
    height:100,
    fill:"blue"
   }))

  c.renderAll()

  let canvasModel = c.toObject()
  canvasModel.objects = canvasModel.objects.filter(e => e.type !== "triangle")

  c.clear()
  console.log('canvasmodel', canvasModel)
  c.loadFromJSON(JSON.stringify(canvasModel), c.renderAll.bind(c))

  c.add(c._objects[0].tri)

  c.renderAll()

https://jsfiddle.net/davidtorroija/3y97d7nj/2/

Fabricjs - 在＆＃34中创建的对象;添加＆＃34; loadFromJSON未完全恢复事件

1 个答案: