FabricJS是一个优秀的canvas 绘图库，今天推荐一个好用的vue-fabric组件库，在vue中是如何使用FabricJS绘图库的
首先给出组件开源项目链接，里面有详细的使用说明文档 https://github.com/purestart/vue-fabric
依赖
下载customiseControls.min.js.和 fabric.min.js.到本地 static/js/文件下，参考 github
本地项目 index.html 引入
<script type="text/javascript" src="./static/js/fabric.min.js"></script>
<script type="text/javascript" src="./static/js/customiseControls.min.js"></script>
Import 引入
在main.js中
import 'vue-fabric/dist/vue-fabric.min.css';
import { Fabric } from 'vue-fabric';
Vue.use(Fabric);
使用
<vue-fabric ref="canvas" :width="width" :height="height"></vue-fabric>
下面来介绍如何在canvas上绘制东西
1、canvas上绘制图片
this.$refs.canvas.createImage(url,options)
其中url 是图片的资源路径 optoions是绘制canvas参数 包括 id(唯一标识该元素，以下每个方法 options 参数都带 id),width,height,left,top,registeObjectEvent (Boolean 是否注册对象事件)
2、canvas上绘制文本
this.$refs.canvas.createTextbox(text,options)
text文本内容 ，options 是canvas绘制参数，请查阅github 组件说明
3、开启/关闭自由绘制（画笔功能）
this.$refs.canvas.freeDrawConfig(options)
options 是canvas绘制参数,请查阅github 组件说明
4、toDataUrl() 返回当前画布的 base64 图片
、、、等其它方法 ，这里就不一一列举，感兴趣的可以自行查阅github官网
