你我学习网
Fabric.js 是一个可以简化 Canvas 程序编写的库。Fabric.js 为 Canvas 提供所缺少的对象模型、svg parser、交互和一整套其他不可或缺的工具。本文演示如何在 Vue.js 项目中引入并使用 Fabric.js 库。
1，安装配置
（1）首先进入项目文件夹，执行如下命令进行安装：
1 | npm install fabric |
（2）安装后打开 main.js 文件，添加如下代码将其引入：
1 2 | import fabric from 'fabric'Vue.use(fabric); |
2，使用样例
（1）下面代码在画布上绘制一个红色矩形。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <template> <div> <canvas id="canvas" width="300" height="200"></canvas> </div></template><template> <div> <canvas id="canvas" width="300" height="200"></canvas> </div></template> <script>export default { name: 'Test', data () { return { } }, methods:{ }, mounted() { var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ top : 50, left : 100, width : 100, height : 70, fill : 'red' }); canvas.add(rect); }}</script> <style scoped> canvas { border: 1px dashed black; }</style> canvas { border: 1px dashed black; } |
（2）运行结果如下：
