fabricJs 自定义对象不从 JSON 呈现

Question

fabricJS 版本 2.2.3

测试jsFiddle

我正在尝试使用 LabeledRect 子类，但我的问题是，每当我尝试从 JSON 加载它时，它不会呈现，并且我在控制台中没有错误。请参阅下面的小提琴。

如何正确渲染它？我认为我的问题出在 fromObject 函数中，但我不知道在哪里。

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js).
 */

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// ADD YOUR CODE HERE

var json = '{"version":"2.2.3","objects":[{"type":"labeledRect","version":"2.2.3","originX":"left","originY":"top","left":0,"top":0,"width":100,"height":50,"fill":"#faa","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0,"label":"1"}]}';

fabric.LabeledRect = fabric.util.createClass(fabric.Rect, {

  type: 'labeledRect',

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

    this.callSuper('initialize', options);
    this.set('label', options.label || '');
  },

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

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

    ctx.font = '20px Helvetica';
    ctx.fillStyle = '#333';
    ctx.fillText(this.label, -this.width / 2, -this.height / 2 + 20);
  }
});

fabric.LabeledRect.fromObject = function(object, callback) {
  fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) {
    delete object.objects;
    callback && callback(new fabric.LabeledRect(enlivenedObjects, object));
  });
};
fabric.LabeledRect.async = true;

canvas.loadFromJSON(json);
canvas.renderAll();

canvas {
  border: 1px solid #999;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="1000" height="600"></canvas>

Answer 1

fabric.LabeledRect.fromObject = function(object, callback) {
  return fabric.Object._fromObject('LabeledRect', object, callback);
};

在fromObject内调用fabric.Object._fromObject

演示

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

var json = '{"version":"2.2.3","objects":[{"type":"labeledRect","version":"2.2.3","originX":"left","originY":"top","left":0,"top":0,"width":100,"height":50,"fill":"#faa","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0,"label":"1"}]}';

fabric.LabeledRect = fabric.util.createClass(fabric.Rect, {

  type: 'labeledRect',

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

    this.callSuper('initialize', options);
    this.set('label', options.label || '');
  },

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

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

    ctx.font = '20px Helvetica';
    ctx.fillStyle = '#333';
    ctx.fillText(this.label, -this.width / 2, -this.height / 2 + 20);
  }
});

fabric.LabeledRect.fromObject = function(object, callback) {
  return fabric.Object._fromObject('LabeledRect', object, callback);
};

canvas.loadFromJSON(json,canvas.renderAll.bind(canvas));

canvas {
  border: 1px solid #999;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="1000" height="600"></canvas>