vue2+Fabric.js库的使用（1）--Fabric的介绍

---

前言

提示：本文章会连续记录Fabric.js的使用

在项目开发过程中，可能会遇到绘制图形的情况，如自由绘图、图像编辑、绘制建筑轮廓图然后生成3D模型等等，这样的情况下，需要一个比较好的图形编辑器，并且可以导出绘制体，进行编辑，基于此进行本文章的撰写，同样也是自己学习的记录

---

提示：自己不是一个开发人员，也是学习的阶段，有不正确的地方请大家指出

一、Fabric.js是什么？

Fabric.js是一个完全开源的Javascript HTML5 （画布库）项目，于2010年左右开始创建，降低了开发Canvas的过程中，各种类型的交互与变更的复杂度；

Fabric.js是基于canvas封装的开源库，canvas提供一个好的画布能力, 但其api超级烂。如果你就想画个简单图形, 其实也可以, 不过做一些复杂的图形绘制, 编写一些复杂的效果，就不是那么好了。而Fabric.js就是比较好的选择之一

二、和vue2结合搭建一个简单项目

1.创建vue2项目

首先创建一个vue2项目，比较简单，这个不做过多说明，直接采用脚手架vue-cli（我用的CLI v5.0.8），在cmd中输入下面命令：

//创建vue项目
vue create + 项目名

创建完成之后，项目就会初始化好，如下：

2.安装Fabric.js

npm i fabric --save

3.创建简单图形

先创建简单的图形，把项目跑起来

只需 3个操作 就能展示点东西了

3.1创建canvas 容器

在 template 中创建 ，并设置容器的 id 和 宽高，width/height
代码如下（示例）：

<canvas width="1200" height="500" id="canvas-box" style="border: 1px solid #ccc;"></canvas>

然后 把容器居中显示
代码如下（示例）：

.hello{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content:center;
  align-items:center;
}

3.2引入Fabric.js

在vue中引入Fabric.js

import { fabric } from 'fabric'

3.3使用 fabric 接管容器，并画一个矩形

实例化 fabric ，之后就可以使用 fabric 的 api 管理 canvas 了。

  mounted(){
    
    this.init()

  },

  methods:{
    init(){

      this.canvas = new fabric.Canvas('canvas-box') // 这里传入的是canvas的id

      // 创建一个长方形
      const rect = new fabric.Rect({
        top: 30, // 距离容器顶部 30px
        left: 30, // 距离容器左侧 30px
        width: 100, // 宽 100px
        height: 60, // 高 60px
        fill: 'red' // 填充 红色
      })

      // 在canvas画布中加入矩形（rect）。add是“添加”的意思
      this.canvas.add(rect)

    },

  },

呈现：

完整代码

<template>
  <div class="hello">
    <!-- 画布元素 -->
    <canvas width="1200" height="500" id="canvas-box" style="border: 1px solid #ccc;"></canvas>
  </div>
</template>

<script>

import { fabric } from 'fabric'

export default {
  name: 'HelloWorld',
  data() {
    return {
      
    }
  },

  mounted(){
    this.init()
  },

  methods:{
    init(){

      this.canvas = new fabric.Canvas('canvas-box') // 这里传入的是canvas的id

      // 创建一个长方形
      const rect = new fabric.Rect({
        top: 30, // 距离容器顶部 30px
        left: 30, // 距离容器左侧 30px
        width: 100, // 宽 100px
        height: 60, // 高 60px
        fill: 'red' // 填充 红色
      })

      // 在canvas画布中加入矩形（rect）。add是“添加”的意思
      this.canvas.add(rect)

    },

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content:center;
  align-items:center;
}

</style>

总结

这就是通过Fabric.js库创建了一个简单的项目，在画布里面绘制一个矩形，后续的文章会继续介绍