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

作者: hgweb 发布时间: 2019-12-26 浏览: 100 次 编辑

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)运行结果如下:

原文:Vue.js - 在项目中引入并使用Fabric.js库(Canvas绘图库)