fabricjs实现图片加备注文字并下载效果

前言：啥也不说，先上效果：

思路：听说要做一个仿微信截图添加备注的效果，吓得我赶紧做了个demo，上图实现了文字备注，并修改文字颜色，修改文字大小的方法和修改颜色的实现差不多，就不赘述了。

工具：fabricjs 和  elementui

实现：

一、基本用法（本文不涉及elementui的用法，可自行到官网查看用法）

      this.canvas = new fabric.Canvas('canvas')   // 声明画布，与id为canvas的元素绑定 　    　　this.canvas.width = this.width // 动态设置画布宽（若画布宽高固定则不需要动态设置） 　　 　　this.canvas.height = this.height // 动态设置画布高
　　 　　new fabric.Image(） // 设置图片，可使用变量接受实例，方便后面使用 　　 　　new fabric.IText()  // 设置可编辑文字（文字有好几种，这种是可以编辑的）   　　canvas.add(image)  // fabric自带add方法，可将image示例添加到canvas画布上，添加文字同理 　　 　　image.set('selectable', false) // 通过fabric实例的set方法给实例设置属性，有set方法自然也有get方法； 　　 　　canvas.setActiveObject(text)  // 将实例置为激活状态（也就是选中状态） 　　 　　canvas.getActiveObject()  // 获取当前激活对象 　　 　　text.enterEditing()   // 将文字置为编辑状态（可进行文字编辑） 　　 　　canvas.remove(ctx)  // 移除实例 　　 　　text.on('selected',（）=>{})  // 实例可通过on方法添加事件，selected为选中事件，当激活实例时执行 　　 　　canvas.on('mouse:down',（）=>{})  //  画布上鼠标按下事件   　　this.canvas.renderAll()   // 手动执行canvas重绘     二、示例代码   Fabric.vue

三、思路 　　相对麻烦的功能是鼠标点击的事件，会有三种情况需要识别： 　　1、初次点击，画布上没有示例，这时需要添加文字示例； 　　2、再次点击 　　2.1、如点击到实例，我们不能添加实例，而是在点击上的示例上面继续操作； 　　2.2、如没有点击到实例，说明点击在了空白地方，这时画布的默认动作会取消掉激活对象； 　　上面三种情况可以通过this.activeIndex去判断。 　　修改文字大小和颜色的功能只需要将对应的参数用变量取代即可实现。     最后：为了方便今后回顾，注释代码都有，需要时便再来取，更多高级功能将来有机会再深入研究。