对象没有方法“setupState”答案

【问题标题】：Object has no method 'setupState'对象没有方法“setupState”
【发布时间】：2014-05-17 13:51:10
【问题描述】：

我使用canvas.toJSON() 方法序列化了我的画布。但尝试重新创建我的画布时，会导致对象被重绘，但 100% 无响应（无法拖动）。

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

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

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

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

知道会发生什么吗？

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

对象确实有自定义属性，但我确保修改 toObject 方法原型如下：

    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 画布格式。我会继续调查。

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

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

我通过基于这些变量重新创建对象来解决这个问题，并将其转换为 JSON 表示。在我的应用程序中，FabricJS 数据存储为 geometry 以及一些附加数据（id、metadata）。

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);
  }
}

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

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

干杯， smon

【讨论】：