Fabric.js解读

官 网：http://fabricjs.com/

npm地址：https://www.npmjs.com/package/fabric

开源协议：MIT

周下载量：4.8w

浏览器支持：Firefox 2+，Safari 3+，Opera 9.64+，Chrome (所有版本)，IE10, IE11, Edge

 

fabric.js 是一个基于canvas元素的交互式对象模型。它也是一个svg到画布的解析器。

由于性能是最关键的需求之一，所以我们选择了canvas而不是SVG。虽然SVG非常适合静态形状，但是在动态操作对象(移动、缩放、旋转等)方面，它的性能不如canvas

 

创建一个可选择，可拖拽的canvas

var canvas = new fabric.Canvas(id);

创建一个不可操作的canvas(适用于创建非交互图标，非交互式图像)

var canvas = new fabric.StaticCanvas(id);

 

原生canvas创建矩形

var canvasEl = document.getElementById('c');

var ctx = canvasEl.getContext('2d');

ctx.fillStyle = 'red';

ctx.fillRect(100, 100, 20, 20);

修改矩形位置，首先擦除矩形，然后再次画矩形

ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); ctx.fillRect(20, 50, 20, 20);

 

fabric创建同样尺寸的矩形

var rect = new fabric.Rect({

    left: 100,

    top: 100,

    fill: 'red',

    width: 20,

    height: 20,

});

canvas.add(rect);

创建完成之后要改变矩形位置，直接修改属性

rect.set({ left: 20, top: 50 });

在Fabric中，我们对对象进行操作 - 实例化它们，更改它们的属性，并将它们添加到画布

可设置的参数有

left top width height fill opicty stroke strokeWidth scaleX scaleY angle skewX skewY

 

Fabric中提供7种基本形状：

fabric.Circle（圆）

fabric.Ellipse（椭圆）

fabric.Line（线）

fabric.Polygon（多边形）

fabric.Polyline（多段线）

fabric.Rect（矩形）

fabric.Triangle（三角形）

 

颜色

支持十六进制，RGB或RGBA颜色

new fabric.Color('#f55'); new fabric.Color('#123123'); new fabric.Color('356735'); new fabric.Color('rgb(100,0,100)'); new fabric.Color('rgba(10, 20, 30, 0.5)');

各种颜色格式可以相互转换

new fabric.Color('#f55').toRgb(); // "rgb(255,85,85)" new fabric.Color('rgb(100,100,100)').toHex(); // "646464" new fabric.Color('fff').toHex(); // "FFFFFF"

 

渐变色

rect.setGradient('fill', { x1: 0, y1: 0, x2: 0, y2: rect.height, colorStops: { 0: '#000', 1: '#fff' } });

其中x1，y1为起点，x2,y2为终点

 

Text -->文本

var text = new fabric.Text('hello world! \n哈喽 沃德?????', {

    left: 10,

    top: 10,

    fontFamily: '仿宋',

    fontSize: 50,

    // 无法直接更改文本的宽度/高度属性。相反，您需要更改“fontSize”值才能使文本对象变大或变小

    fontWeight: 'bold',

    underline: true,//下

    linethrough: true,//穿过

    overline: true,//上，三个可以一起用

    fill: 'red',

    // 阴影 颜色，水平偏移，垂直偏移和模糊大小

    shadow: 'green -15px -15px 3px',

    fontStyle: 'italic',//斜体 粗体

    stroke: 'yellow',//边线颜色

  strokeWidth: 2,//边线宽度

  textAlign: 'right',

  lineHeight: 2,

  textBackgroundColor: 'rgb(0,200,0,.2)'//字体背景

});

canvas.add(text);

 

添加图片，两种方式

1.在页面结构中写入img标签，获取标签添加到画布中

<img src="my_image.png" id="my-image">

var imgElement = document.getElementById('my-image');

        var imgInstance = new fabric.Image(imgElement, {

         left: 300,

         top: 100,

         angle: 10,

         opacity: 0.85

        });

        canvas.add(imgInstance);

2.获取url地址添加，（常用）

fabric.Image.fromURL('my_image.png',function(oImg){

oImg.set({top:300});

canvas.add(oImg);

});

Image filters（图片过滤）

跟手机上调整图片滤镜一样

fabric.Image.fromURL('pug.jpg', function(img) { img.filters.push(new fabric.Image.filters.Sepia()); img.applyFilters(); // add image onto canvas (it also re-render the canvas) canvas.add(img); });

把图片转成褐色

 

 

path路径

var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\ c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\ 0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\ c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\ -2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\ 12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\ -20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z'); canvas.add(path.set({ left: 100, top: 200 }

 

Group --> 组

组的创建

圆

var circle = new fabric.Circle({

   radius: 20, fill: 'green', left: 150, top: 100, originX: 'center',

originY: 'center'

});

三角

var triangle = new fabric.Triangle({

   width: 20, height: 30, fill: 'blue', left: 50, top: 50, originX: 'center',

originY: 'center'

});

 

进行组合--------------------------

var group = new fabric.Group([circle, triangle], {

    left: 150,

    top: 100,

    angle: 10

})

往canvas上添加组元素

canvas.add(group);

往组内添加新元素

group.add(new fabric.Rect({

    width: 50,

    height: 50,

    originX: 'center',

    originY: 'center'

}));

删除组内元素

group.remove(triangle)//移除三角形

 

动画

rect.animate，第一个参数为添加动画的属性，第二个是动画结束时的值，第三个参数是一个可选对象，指定动画的更精细细节 --> 持续时间，回调，缓冲动画(ease,easein,easeout...)

缓冲方式 http://fabricjs.com/animation-easing

rect.animate('left', 500, {

         onChange: canvas.renderAll.bind(canvas),

         duration: 1000,

         easing: fabric.util.ease.easeOutBounce

 });

动画案例：http://fabricjs.com/solar-system

 

事件------------事件分为画布绑定的事件和画布上元素绑定的事件

canvas.on绑定事件 canvas.off解除绑定

给画布绑定事件

canvas.on('mouse:down',function(options){

    if (options.target) {

        console.log('an object was clicked! ', options.target.type);

    }

});

给画布上的元素绑定事件

rect.on('selected', function() {

    console.log('selected a rectangle');

});

 

 

序列化 toObject、toJSON、toSVG

对照源码这里的toObject和toJSON实际是调用的都是toObject方法

 

 

 

反序列化

//fabric.Canvas#loadFromJSON

//fabric.Canvas#loadFromDatalessJSON

//fabric.loadSVGFromURL

//fabric.loadSVGFromString

//前两个是用于画布实例，后两个直接用于fabric

canvas.loadFromJSON('{"version":"3.2.0","objects":[{"type":"rect","version":"3.2.0","originX":"left","originY":"top","left":100,"top":100,"width":100,"height":100,"fill":"orange","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}],"background":"rgb(100,100,200)"}');

// fabric.loadSVGFromString('./gen.svg', function(objects, options) {

//  var obj = fabric.util.groupSVGElements(objects, options);

//  canvas.add(obj).renderAll();

// })