使用Fabric.js库制作一个绘画网站，实现绘画板涂鸦功能

1.学习之前

这个功能是基于vue的，如果你没有学过vue，可能对里面的知识不理解，对于canvas要有一点点的理解，如果没有，建议学习一下
如果实在需要关于Fabricjs写的绘画功能，可以看一下我参考其他人写的文档，他们的都是使用原生的写法来实现的

http://funcion_woqu.gitee.io/fabric-doc/api/#circle 翻译的部分中文API文档
http://fabricjs.com/docs/fabric.Canvas.html 官方文档，写的实在太烂了，有部分参考的价值
https://juejin.cn/post/7026941253845516324#heading-75 一位大佬写的入门文章，非常实用

2.实现功能

主要功能有自由绘画、选择、删除、正方形、圆形、椭圆形、三角形、线段、虚线、文本，修改线条粗细、颜色、前进、后退、重置画布、上传背景图片、设置画布大小等…
在线预览地址：https://yuanshusu.gitee.io/fabric-ui/（以前查看的需要清除缓存后查看）
项目地址：https://gitee.com/yuanshusu/fabric-ui

进入的页面是白色画板，可以上传背景图片，页面效果：画图的操作样式

3. 功能实现

安装fabricjs包： npm install fabric@5.3.0
在使用的组件中引入: import { fabric } from 'fabric'

在mounted函数中，对画布进行初始化

let canvas = new fabric.Canvas('canvas-box',{width: this.canvasWidth,    // 画布宽度height: this.canvasHeight,  // 画布高度backgroundColor: '#FFFFFF', // 画布背景色isDrawingMode: false,       // 自由绘图模式devicePixelRatio: true,     //Retina 高清屏 屏幕支持targetFindTolerance:10,     //当元素以实际内容选择时，这个值越大越表面容易被选择到perPixelTargetFind:true,    // 选择绘画对象时，以对象实际内容选择，而不是所处边界})

如果要设置背景图片，使用setBackgroundImage函数，也可以使用setbackgroundColor来设置，感觉两者差别不大

canvas.setBackgroundImage({require('../../public/chuang.png'),  //在线图片地址也可以，使用'http://...'canvas.renderAll.bind(canvas),opacity: 0.8,               //透明度// angle: 15,               // 旋转背景图,这里暂时不需要width:1000,     			//设置的宽度和高度不能超过图片本身的大小height:5000,  				//如放大图片，使用scaleX、scaleYscaleX:this.imgWidth,       //放大的水平图片比例scaleY:this.imgHeight,      //放大的垂直图片比例originX: 'left',            //图片位置水平停靠位置originY: 'top',             //图片位置垂直停靠位置crossOrigin: 'anonymous'    //允许图片跨域，用于图片下载
})

这样画布的初始化就已经做好了

画布初始化好以后，默认是框选操作，如果要切换为自由绘画（铅笔）,可以使用：canvas.isDrawingMode = true 开启，等于fasle关闭自由绘画

绘制图形操作，其实是绑定鼠标按下事件，当按下的时候，创建一个宽高为0的对象，当鼠标移动时，让当前鼠标的坐标减去当时鼠标按下的坐标，在设置给对象，当离开时把当前控制的对象置空。
this.patternClass = new fabric.Rect({	//创建一个矩形对象top: this.downPoint.y,       //创建对象的坐标left: this.downPoint.x,width:0,                      //宽和高height:0,fill: 'transparent',          //填充颜色stroke: this.borderColor,     //线条颜色strokeWidth:this.borderWidth, //线条宽度
})
this.canvasObj.add(this.patternClass)		//添加到画布上去

给鼠标绑定事件，有两种绑定方式。
一：使用canvas.onclick = (opt)=>{},
二：对象方式，绑定多个事件

canvas.on({'mouse:down': opt =>{	//鼠标按下事件//里面写生成对象的方法，就是上面的创建方法},	'mouse:move': opt =>{ 	//鼠标移动事件let rectW = Math.abs(this.downPoint.x - opt.absolutePointer.x)	//this.downPoint是鼠标按下的坐标let rectH = Math.abs(this.downPoint.y - opt.absolutePointer.y)// 设置尺寸和所在位置this.patternClass.set('width', rectW)			//设置宽this.patternClass.set('height', rectH)		//设置高this.patternClass.set('top', Math.min(e.absolutePointer.y, this.downPoint.y))	//设置顶点的坐标this.patternClass.set('left', Math.min(e.absolutePointer.x, this.downPoint.x))// 刷新一下画布this.canvasObj.requestRenderAll()},
})