javascript - 对象没有方法 'setupState'

Question

我使用 canvas.toJSON() 序列化了我的 Canvas 方法。但是尝试重新创建我的 Canvas ，导致对象被重新绘制，但 100% 无响应(无法四处拖动)。

我试图变得聪明，并尝试通过从 JSON 中提取对象来逐一重绘对象(我在下面所做的伪代码)。

forEach(jsonRepresentation.objects, function (obj) {
            canvas.add(obj);
}
canvas.renderAll();

这也不起作用并导致对象不绘制，但单击 CANVAS 会导致错误:

TypeError: Object #<Object> has no method 'setupState'

知道会发生什么吗？

应用程序非常复杂，所以我不确定是否可以使用 fiddle/plunkr。

对象确实有自定义属性，但我确保修改了 toObject方法原型(prototype)如下:

    fabric.Object.prototype.toObject = (function (toObject) {
      return function () {
        return fabric.util.object.extend(toObject.call(this), {
          customAttribute1: this.customAttribute1,
          ...
        });
      };
    })(fabric.Object.prototype.toObject)

为了持久化这些属性(它们是在手动扫描生成的 JSON 之后)。

更新:

我注意到问题的出现是因为我的很多对象内部都有对象，这些对象没有被递归解析为 FabricJS Canvas 格式。我会继续调查。

Answer 1

我刚刚遇到了类似的问题。在我的应用程序中，我不想保存完整的 Canvas ，而只想保存用户添加的一些对象。对象的方法不在 JSON 中表示，只是变量(width、height,...) - 所以当试图在 Canvas 中重绘对象时，我(可能你也是)得到了提到的错误。

我通过基于那些使其成为 JSON 表示的变量重新创建对象来解决这个问题。在我的应用程序中，除了一些附加数据(id、metadata)之外，FabricJS 数据还存储为 geometry。

for(var primitiveKey in data[0].value.primitives){
  var currentPrimitive = data[0].value.primitives[primitiveKey];
  var reassembledPrimitive = [];

  reassembledPrimitive.id = currentPrimitive.id;
  reassembledPrimitive.metadata = currentPrimitive.metadata;
  reassembledPrimitive.geometry = new Fabric.Rect(currentPrimitive.geometry);
  this.primitiveList.push(reassembledPrimitive);
}

绘制图元:

redrawImage:function(){
  this.canvas.add(this.image);
  for(var i = 0; i < this.primitives.length; i++){      
    this.canvas.add(this.primitives[i].geometry);
  }
}

如果使用不同的对象类型，您必须读取每个对象的类型并相应地实例化。

解决方案不是很好，如果您已经找到另一个更好的解决方案，请告诉我。

干杯， 斯蒙