Question

该示例创建了一个子类序列化

未捕获的TypeError：无法读取属性＆＃39; async＆＃39;未定义的（匿名函数）@ fabric.js：634fabric.util.enlivenObjects @ fabric.js：627fabric.util.object.extend._enlivenObjects @ fabric.js： 10485fabric.util.object。 extend.loadFromJSON @ fabric.js：10397 （匿名函数）@（索引）：134

我无法理解Fiddle

<button id="json">toJSON/loadFromJSON</button>

$(function () {
    var canvas = window._canvas = new fabric.Canvas('canvas');
    var canvas2 = window._canvas2 = new fabric.Canvas('canvas2');


function MakePoint2(name,id){

var self=this;
self.id=id;    
self.name=name;
self.typeName='pointsgroup';

var LabeledCircle = fabric.util.createClass(fabric.Circle, {

  type: 'labeledCircle',

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

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

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

  _render: function(ctx) {
    this.callSuper('_render', ctx);
//фон
    ctx.fillStyle = "rgba(0, 204, 0, 0.3)";
    var w=2*12;
    var h= 12;
    var radius=3;
    ctx.fillRect(-w/2, -h-radius-1, w,h);
 //надпись   
    ctx.font = "Italic "+h+"px Helvetica";
    ctx.fillStyle = "#ffffff";
    ctx.fillText(this.label, -w/4, -radius-3);


  }
});

var t=new LabeledCircle({

  left:            0,
  top:             0,
  stroke:          "red",
  temporary_color: "red",
  fill:            'rgba(0, 0, 0, 0)',

  radius:          3,
  strokeWidth:    4,
  originX:         "center",
  originY:         "center",
  lockUniScaling : true,
  label:           self.name,
  id:              self.id
});


t.set('radius', 3);
t.set('strokeWidth',4);
t.set('left', 100);
t.set('top', 100);
return t;

}


  var Pt= MakePoint2('X','1');
    Pt.set('left', 100);
Pt.set('top', 100);
    canvas.add(Pt);



    document.getElementById('json').addEventListener('click', function () {
        var json = window._json = canvas.toJSON();
        canvas2.loadFromJSON(json, function() {
            canvas2.renderAll();
            canvas2.forEachObject(function (o) {
                //console.log('id', o.id, 'name', o.name, 'isVisible', o.isVisible);
            });
        });
    });
});

子类化未反序列化

0 个答案: