loadFromJSON examples

Used in documentation (jsdoc tag)

by Kris

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="169">
    <foreignObject width="100%" height="100%">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <table data-v-4e49f804="" id="bTable" style="border-left: 1px solid rgb(215, 215, 215); border-top: 1px solid rgb(215, 215, 215); border-collapse: collapse;"><tr><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;" contenteditable="true"></td><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;" contenteditable="true"></td><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;" contenteditable="true"></td><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;" contenteditable="true"></td><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;" contenteditable="true"></td></tr><tr><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;" contenteditable="true"></td><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;" contenteditable="true"></td><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;" contenteditable="true"></td><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;" contenteditable="true"></td><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;" contenteditable="true"></td></tr><tr><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;" contenteditable="true"></td><td style="width:100px; height:42px; border-right:1px solid #D7D7D7;  border-bottom:1px solid #D7D7D7;"...

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});
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, forceAsync) {
  return fabric.Object._fromObject('LabeledRect', object, callback, forceAsync);
}
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

var json = '{"version":"2.6.0","objects":[{"type":"rect","version":"2.6.0","originX":"center","originY":"center","left":300,"top":150,"width":150,"height":150,"fill":"#29477F","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"rgba(94, 128, 191,...