简介甚么是Fabric.js?
Fabric.js是1个能够简化Canvas程序流程撰写的库。 Fabric.js为Canvas出示所缺乏的目标实体模型, svg parser, 互动和1整套别的不能或缺的专用工具。因为Fabric.js为海外架构，官方API杂乱无章多种多样，有关文本文档大多数为英小蜜档，并且数量很少，因此本文旨在协助初学者在新项目中迅速上手Fabric.js，享有绘图Canvas的全过程。
为何要应用Fabric.js？
Canvas出示1个好的画布工作能力, 可是Api不足友善。绘图简易图型实际上还能够, 但是做1些繁杂的图型绘图, 撰写1些繁杂的实际效果，就并不是那末便捷了。Fabric.js便是为此而开发设计，它关键便是用目标的方法去撰写编码。
Fabric.js能做的事儿
- 在Canvas上建立、填充图型（包含照片、文本、标准图型和繁杂相对路径构成图型）。
- 给图型填充渐变色色调。
- 组成图型（包含组成图型、图型文本、照片等）。
- 设定图型动漫集客户互动。
- 转化成JSON, SVG数据信息等。
- 转化成Canvas目标自带拖拖拉拉拽作用。
起步
Vue新项目中引进Fabric.js
假定您的新项目中正在应用ES6和Webpack，您能够刚开始应用Fabric.js，以下所示：
1、在指令行中：
npm install fabric（或yarn add fabric）
2、将其引进 .vue 文档中
import { fabric } from 'fabric'
3、在 .vue 的单文档中的 mounted: 性命周期里刚开始你的Fabric.js之旅啦
注：默认设置的fabric npm控制模块造成了非常大的包，假如Fabric.js中您有许多将会不必须的包，在这类状况下，能够在 在此处 或在指令行中搭建你自身的版本号。
绘图图型
绘图标准图型
1、申明画布
var canvas =new fabric.Canvas('main');
2、绘图图型
var rect = new fabric.Rect({
left:100,//间距画布左边的间距，企业是像素
top:100,//间距画布上边的间距
fill:'red',//填充的色调
width:30,//方形的宽度
height:30//方形的高宽比
});
3、加上图型至画布
canvas.add(rect);
别的标准图型：
- 绘图方形
var rect = new fabric.Rect - 绘图圆形
var circle = new fabric.Circle - 绘图3角形
var triangle = new fabric.Triangle
绘图不规律图型
应用相对路径制图：用点和线的挪动的方法开展制图。根据对 线、曲线图、弧的运用绘图十分繁杂的图型。
在fabric.Path( )方式中，“M”意味着“挪动”指令，这个“M 00” 意味着把画笔挪动到（0,0）点座标。
“L”意味着“线”，“L 200 100 ”的意思是应用钢笔划1条线，从（0,0）座标画到（200,100）座标。 “z” 意味着让图型闭合相对路径。
画好3角形后，大家能够用set( )方式对3角形的部位、色调、角度、全透明度等特性开展设定。
实际编码以下：
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120,fill:'red' });
canvas.add(path);
对照片的实际操作
HTML插进照片
<body>
<canvas id="canvas" width='800' height='800'></canvas>
<img src="./2.png" id="img">
</body>
---------------------
var canvas = new fabric.Canvas('canvas');//申明画布
var imgElement = document.getElementById('img');//申明大家的照片
var imgInstance = new fabric.Image(imgElement,{ //设定照片部位和模样
left:100,
top:100,
width:200,
height:100,
angle:30//设定图型顺时针转动角度
});
canvas.add(imgInstance);//添加到canvas中
JavaScript插进照片
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('./2.png', function(oImg) {
oImg.scale(0.1);//照片变小10倍
canvas.add(oImg);
});
互动
对画布的互动
canvas.add(imgInstance);//添加到canvas中
var canvas = new fabric.Canvas('canvas');
canvas.on('mouse:down', function(options) {
console.log(options.e.clientX, options.e.clientY)
})
注：常见监视恶性事件以下：
mouse:down：电脑鼠标按下时mouse:move：电脑鼠标挪动时mouse:up：电脑鼠标抬起时
对画布上目标的实际操作
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
rect.on('selected', function() {//选定监视恶性事件
console.log('selected a rectangle');
});
var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
circle.on('selected', function() {
console.log('selected a circle');
});
canvas.add(rect);
canvas.add(circle);
注：常见监视恶性事件以下：
after:render：画布重绘后object:selected：目标被选定object:moving：目标挪动object:rotating：目标被转动object:added：目标被添加object:removed：目标被移除
组成
new fabric.Group():接纳两个主要参数：要组成目标名字构成的数字能量数组、组成到1起的目标的相互特性。
var canvas = new fabric.Canvas('canvas');
var circle = new fabric.Circle({//绘图圆形
radius: 100,
fill: '#f00',
scaleY: 0.5,
originX: 'center',//调剂管理中心点的X轴座标
originY: 'center'//调剂管理中心点的Y轴座标
});
var text = new fabric.Text('Hello World', {//绘图文字
fontSize: 30,
originX: 'center',
originY: 'center'
})
//开展组成
var group = new fabric.Group([circle, text], {
left: 150,
top: 100,
angle: 10
})
canvas.add(group);
编码序列化与反编码序列化
编码序列化
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
width: 100,
height: 100,
fill: 'red'
});
canvas.add(rect);
console.log(JSON.stringify(canvas.toJSON()));
反编码序列化
var canvas = new fabric.Canvas('canvas');
canvas.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null}')
SVG
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
width: 100,
height: 100,
fill: 'red'
});
canvas.add(rect);
canvas.toSVG();
参照文本文档：http://fabricjs.com/articles/
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。