fabricjs 的用途

2018-07-09 13:47:47来源：博客园阅读 ()

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

官网：http://fabricjs.com/

经典使用案例：

 1 (function() {
 2   var canvas = this.__canvas = new fabric.Canvas('c');
 3   fabric.Object.prototype.transparentCorners = false;
 4 
 5   var $ = function(id){return document.getElementById(id)};
 6 
 7   var rect = new fabric.Rect({
 8     width: 100,
 9     height: 100,
10     top: 100,
11     left: 100,
12     fill: 'rgba(255,0,0,0.5)'
13   });
14 
15   canvas.add(rect);
16 
17   var angleControl = $('angle-control');
18   angleControl.oninput = function() {
19     rect.set('angle', parseInt(this.value, 10)).setCoords();
20     canvas.requestRenderAll();
21   };
22 
23   var scaleControl = $('scale-control');
24   scaleControl.oninput = function() {
25     rect.scale(parseFloat(this.value)).setCoords();
26     canvas.requestRenderAll();
27   };
28 
29   var topControl = $('top-control');
30   topControl.oninput = function() {
31     rect.set('top', parseInt(this.value, 10)).setCoords();
32     canvas.requestRenderAll();
33   };
34 
35   var leftControl = $('left-control');
36   leftControl.oninput = function() {
37     rect.set('left', parseInt(this.value, 10)).setCoords();
38     canvas.requestRenderAll();
39   };
40 
41   var skewXControl = $('skewX-control');
42   skewXControl.oninput = function() {
43     rect.set('skewX', parseInt(this.value, 10)).setCoords();
44     canvas.requestRenderAll();
45   };
46 
47   var skewYControl = $('skewY-control');
48   skewYControl.oninput = function() {
49     rect.set('skewY', parseInt(this.value, 10)).setCoords();
50     canvas.requestRenderAll();
51   };
52 
53   function updateControls() {
54     scaleControl.value = rect.scaleX;
55     angleControl.value = rect.angle;
56     leftControl.value = rect.left;
57     topControl.value = rect.top;
58     skewXControl.value = rect.skewX;
59     skewYControl.value = rect.skewY;
60   }
61   canvas.on({
62     'object:moving': updateControls,
63     'object:scaling': updateControls,
64     'object:resizing': updateControls,
65     'object:rotating': updateControls,
66     'object:skewing': updateControls
67   });
68 })();