fabricjs 的用途

使用html5 的canvas画板做一些图片旋转，拖动，放大，缩小和合成图片的功能，有没有一个集成好的组件库呢？答案肯定是有的，而且还不止我前面提到的功能，下面介绍一下我使用的fabricjs。

官网：http://fabricjs.com/

经典使用案例：

 (function() {

   var canvas = this.__canvas = new fabric.Canvas('c');

   fabric.Object.prototype.transparentCorners = false;

   var $ = function(id){return document.getElementById(id)};

   var rect = new fabric.Rect({

     width: 100,

     height: 100,

     top: 100,

     left: 100,

     fill: 'rgba(255,0,0,0.5)'

   });

   canvas.add(rect);

   var angleControl = $('angle-control');

   angleControl.oninput = function() {

     rect.set('angle', parseInt(this.value, 10)).setCoords();

     canvas.requestRenderAll();

   };

   var scaleControl = $('scale-control');

   scaleControl.oninput = function() {

     rect.scale(parseFloat(this.value)).setCoords();

     canvas.requestRenderAll();

   };

   var topControl = $('top-control');

   topControl.oninput = function() {

     rect.set('top', parseInt(this.value, 10)).setCoords();

     canvas.requestRenderAll();

   };

   var leftControl = $('left-control');

   leftControl.oninput = function() {

     rect.set('left', parseInt(this.value, 10)).setCoords();

     canvas.requestRenderAll();

   };

   var skewXControl = $('skewX-control');

   skewXControl.oninput = function() {

     rect.set('skewX', parseInt(this.value, 10)).setCoords();

     canvas.requestRenderAll();

   };

   var skewYControl = $('skewY-control');

   skewYControl.oninput = function() {

     rect.set('skewY', parseInt(this.value, 10)).setCoords();

     canvas.requestRenderAll();

   };

   function updateControls() {

     scaleControl.value = rect.scaleX;

     angleControl.value = rect.angle;

     leftControl.value = rect.left;

     topControl.value = rect.top;

     skewXControl.value = rect.skewX;

     skewYControl.value = rect.skewY;

   }

   canvas.on({

     'object:moving': updateControls,

     'object:scaling': updateControls,

     'object:resizing': updateControls,

     'object:rotating': updateControls,

     'object:skewing': updateControls

   });

 })();