fabric.js绘图库在使用vue项目中使用

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官网

https://github.com/purestart/vue-fabric