Vue.js - 在项目中引入并使用Fabric.js库（Canvas绘图库）

Fabric.js 是一个可以简化 Canvas 程序编写的库。Fabric.js 为 Canvas 提供所缺少的对象模型、svg parser、交互和一整套其他不可或缺的工具。本文演示如何在 Vue.js 项目中引入并使用 Fabric.js 库。

1，安装配置

（1）首先进入项目文件夹，执行如下命令进行安装：

npm install fabric

（2）安装后打开 main.js 文件，添加如下代码将其引入：

import fabric from 'fabric'
Vue.use(fabric);

2，使用样例

（1）下面代码在画布上绘制一个红色矩形。

<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）运行结果如下：