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

1.学习之前

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

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

2.实现功能

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

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

3. 功能实现

安装fabricjs包： npm install [email protected]
在使用的组件中引入: 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、scaleY
 	scaleX: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()
    },
})

4.结语

最近将项目发布到npm上，可以使用npm i drawing-box下载查看。
暂时先介绍这么多，详细的可以先去看项目写的，后续还需不断改进，如有错误还需指出。