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