Question

In this jsfiddle我有一个从子类创建的行（它基本上是一个带有两个附加属性的行）。我正在尝试将行序列化/反序列化为JSON。我可以序列化没有问题（包括两个额外的属性）但是当我尝试使用loadFromJSON反序列化时，我得到Cannot read property 'async' of undefined异常。

取消注释jsfiddle中的最后一行以获取错误。

我实现了fromObject()方法，但我不确定它是否正确。这段代码出了什么问题？

使用Javascript：

var canvas = new fabric.Canvas('c');

fabric.PolySegment = fabric.util.createClass(fabric.Line, {

  type: 'seg',

  initialize: function(points,options) {
    options || (options = { });

    this.callSuper('initialize', points,options);
    this.set('poly', options.poly);
    this.set('id', options.id);
  },

  toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'), {
      poly: this.get('poly'),
      id: this.get('id')
    });
  },

  _render: function(ctx) {
    this.callSuper('_render', ctx);
      }
    });

fabric.PolySegment.fromObject = function (object, callback) {
    return new fabric.PolySegment(object);
};

fabric.PolySegment.async = true;

var coords1 = [ 10, 10, 100, 100 ];
var seg1 = new fabric.PolySegment(coords1, {
    stroke: 'black',
    strokeWidth: 6,
    originX: 'left',
    originY: 'top',
    poly: 111111,
    id: 222222
});

canvas.add(seg1);
var json = JSON.stringify(canvas);
document.getElementById('t').innerHTML = json;

// uncomment the line below, you'll get an exception
//canvas.loadFromJSON(json);

Answer 1

在看你的小提琴时，似乎问题是你给新课程的类型价值。如果我改变：

type: 'seg',

到

type: 'polySegment',

并取消注释最后一行，我没有收到错误。但是，我也没有在画布上加载这条线。但我想我并不是100％确定你的脚本中发生了什么 - 你是否正在加载polySegment，然后将其转换为JSON并重新加载它？我假设这只是为了说明目的。

虽然我建议在这里摆脱你的错误，但我个人并不是百分之百确定为什么会这样。在阅读FabricJS documentation on Subclassing时，它没有指定子类类型需要与子类定义的类型相匹配，但似乎有效......

我希望在某种程度上有所帮助。

关于此的最后一条评论，我总是使用toJSON方法将canvas元素传输到JSON。虽然这会检索JSON对象，但不会像您一样检索字符串。此外，toJSON方法要求您指定要捕获的属性，因此这可能不是您的案例的最佳方法。 It's discussed on this page。但我提出这个问题的观点是，我确信toJSON方法适用于loadFromJSON方法。所以我提到如果你发现JSON.stringify方法是个问题，那么有另一种方法来处理相同的概念。

Fabric：从JSON加载子类对象时出错

1 个答案: