Fabric.js

$$Fabric.js$$

官网：http://fabricjs.com/

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

npm install fabric

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

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