代码之家  ›  专栏  ›  技术社区  ›  chizz

fabricJs自定义对象不从JSON呈现

  •  4
  • chizz  · 技术社区  · 6 年前

    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>
    1 回复  |  直到 6 年前
        1
  •  6
  •   Durga    6 年前
    fabric.LabeledRect.fromObject = function(object, callback) {
      return fabric.Object._fromObject('LabeledRect', object, callback);
    };
    

    呼叫 fabric.Object._fromObject 在…内 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>