Fabric.js解读
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();
// })