loadFromJSON examples

Used in documentation (jsdoc tag)

by 20yco

HTML

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

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

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

var bounding_rect = new fabric.Rect({
	width:396,
  height:490,
  left:50,
  top:50,
  fill: 'rgba(255,255,255,0.0)',
  stroke: '#666',
  strokeWidth: 2,
  lockMovementX:true,
  lockMovementY:true,
  lockRotation:true,
  lockScalingFlip:true,
  lockScalingX:true,
  lockScalingY:true,
  hasControls: false,
  hasRotatingPoint: false,
  selectable: false,
});

var rect = new fabric.Rect({
	width:100,
  height:100,
  left:50,
  top:50,
  fill: 'red'
});
 
var path = new fabric.Path('M 850,710 H 350 V 120 H 850 Z M 797,170 H 400 V 662 H 797 Z');

path.set({
    top: 0,
    left: 0,
    fill:'rgba(255,255,255,0.95)',
    lockMovementX:true,
    lockMovementY:true,
    lockRotation:true,
    lockScalingFlip:true,
    lockScalingX:true,
    lockScalingY:true,
    hasControls: false,
    hasRotatingPoint: false,
    selectable: false,
    evented: false,
    globalCompositeOperation: 'destination-out'
});

   	canvas.add(bounding_rect);
   	canvas.add(rect);
    canvas.add(path);

canvas.on('object:moving', function(e) {
  
  if(e.target){
  	
    var p1 = new fabric.Point(50, 50);
    var p2 = new fabric.Point(446, 540);
    
    //console.log(e.target.isContainedWithinRect(p1,p2));
    
    if(!e.target.isContainedWithinRect(p1,p2)){
    	console.log('out');
    }
    
  }
  
});