--- theme: smartblue --- ## 简介首先要说的是：本文篇幅很长，建议**点赞收藏（点赞就等于学会了）**。 ### Fabric.js 简介 > `Fabric.js` 是一个功能强大且操作简单的 `Javascript HTML5 canvas` 工具库。 ![00.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bad5897483a54525a91b50ae8441882a~tplv-k3u1fbpfcp-watermark.image?) 如果你需要用 `canvas` 做特效，那我推荐你使用 `Fabric.js` ，因为 `Fabric.js` 语法更加简单易用，而且还提供了很多交互类的 `api`。 `Fabric.js` 简化了很多 `Canvas` 里的概念，代码看上去也更加语义化。
`Fabric.js` 能做什么？可以打开 [『Fabric.js 官网首页』](http://fabricjs.com/) 直接看例子，也可以看看 [『Fabric.js Demos』](http://fabricjs.com/demos/) 查看更炫酷的例子。

### 本文简介如果是 **0基础** 的读者，希望可以从头读到尾，读完起码大概知道 `Fabric.js` 有哪些功能。
本文是根据我的学习过程来编写的，只要跟着本文一步一步操作，一定可以入门 `Fabric.js` ~~，同时还能改善您的睡眠质量、解决毛发过多等诸多问题~~。
由于我使用 `Fabric.js` 的时间不长，这份笔记在各个知识点的内容肯定不够全面的，也不一定完全正确。读者们如果发现本文存在不正确的地方请大胆指出，我会改的~
**本文适合人群：** - 有原生三件套基础的开发者 - 最好有 `canvas` 基础（这是加分项，完全没有也没关系的）本文主要讲解 `Fabric.js` **基础**，包括： - 画布的基本操作 - 基础图形绘制方法（矩形、圆形、三角形、椭圆、多边形、线段等） - 图片和滤镜的使用 - 文本和文本框 - 动画 - 分组和打散分组 - 基础事件 - 自由绘画 - 裁剪 - 序列化和反序列化 - …… 除此之外，还会讲一些**进阶**一点的操作，比如： - 自定义操作角样式和状态 - 自定义控件 - 复制粘贴图形 - 使用事件方式操作图形和分组 - …… 除了上述内容外，我还会根据日后的工作中整理出更多常用和好玩的操作，本文即学习仓库会**不定期更新！！！**

### 相关链接 [『Fabric.js npm地址』](https://www.npmjs.com/package/fabric) [『Fabric.js github地址』](https://github.com/fabricjs/fabric.js)
[🎁本文案例在线预览](http://k21vin.gitee.io/front-end-data-visualization/#/fabric/fabric-basic/fabric-stated) [🎁本文所有案例仓库地址【欢迎Star，不定期更新！！！】](https://gitee.com/k21vin/front-end-data-visualization)

---

## 开发环境搭建 ### 环境和版本说明 - 本文使用 `Fabric.js` 的版本是 `4.6`。 - 本文的开发环境是使用 `Vite` 构建的 `Vue 3.2` 项目。没有 `Vite` 和 `Vue3.2` 基础的同学也不用怕，因为 `Vite` 真的足够简单。本文的目的是讲解 `Fabric.js` ，所以用到 `Vue 3.2` 的地方其实很少，用到时我也会有详细说明。如果你不打算使用 `Vite` 和 `Vue 3.2` 也没关系，**用你喜欢的方式去搭建项目即可**。现在只需跟着以下步骤搭建项目即可。
### 搭建环境（Vite + Vue3） [Vite 官网](https://vitejs.cn/) [Vue3 官网](https://v3.cn.vuejs.org/guide/introduction.html) 如果你不想使用 `Vite + Vue3` 的话，可以跳过本节。我也建议你直接使用原生 (HTML+CSS+JS) 的方式直接学习 `Fabric.js`，因为这样上手速度最快。
#### 1. 搭建Vite项目 ``` npm init @vitejs/app ```
#### 2. 给项目起个名，并选择 Vue ![001.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d12203b249d9470bb8384bc8cf4a5255~tplv-k3u1fbpfcp-watermark.image?) 之后会让你选 `vue` 或者 `vue + ts`，我选择了 `vue` ，你随意。为什么不选 `ts` ？因为一人开发的练手项目使用 `ts` 有点得不偿失。
#### 3. 初始化项目其实做完上一步就会给出提示（3条命令），跟着敲完就能运行项目了 ``` # 进入项目目录 cd fabric-demo # 初始化项目 npm install # 运行项目 npm run dev ``` 如果 `npm` 太慢的话，可以使用 `cnpm` 。如果不知道 `cnpm` 怎么搞，请自行百度。
### 安装Fabric.js #### 方式1：CDN ```html ``` 你可以使用 CDN 的方式引入，因为这样对学习来说是最快捷的。 #### 方式2：npm 本文使用该方法！！！ ``` npm i fabric --save ``` ![002.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/460f050b671f4a9b8b67045c1f084bd9~tplv-k3u1fbpfcp-watermark.image?) 安装完后，`package.json` 会出现箭头指向的那行代码。

---

## 起步只需 **3个操作** 就能展示点东西了。 ### 1. 新建页面并引入 Fabric.js 如果是原生项目，使用 ` ``` 本文使用了 `Vite` 构建的项目，所以可以使用 `import` 引入 ```js import { fabric } from 'fabric' ```
### 2. 创建 canvas 容器在 `HTML` 中创建 `