Fabric.js test

by Vladimir

HTML

<canvas id="a" width="800px" height="600px"></canvas>

JavaScript

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('a');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});
var text = new fabric.Text('hello world', { left: 100, top: 100, fontFamily: "Verdana" });
canvas.add(text);

rect.on('selected', function() {
  console.log('selected a rectangle');
});

canvas.on('mouse:down', function(options) {
  text.setText(options.e.clientX + " " + options.e.clientY);
	canvas.renderAll();
  console.log(rect);
  rect.animate('angle', '+=90', {
  	onChange: canvas.renderAll.bind(canvas)
	});
  var delta = (-rect.left+options.e.clientX);
  console.log(delta);
  rect.animate('left', (delta>0?'+':'-')+'='+Math.abs(delta), {
  	onChange: canvas.renderAll.bind(canvas)
	});
});

// "add" rectangle onto canvas
canvas.add(rect);
/*rect.animate('angle', 90, {
  onChange: canvas.renderAll.bind(canvas),
  duration: 1000,
  easing: fabric.util.ease.easeOutBounce
});*/

rect.animate('left', '+=100', {
  onChange: canvas.renderAll.bind(canvas),
  duration: 1000,
  easing: fabric.util.ease.easeOutBounce
});