Fabric.js入门

1. 新建页面并引入 Fabric.js
如果是原生项目，使用 <script> 标签引入即可：

<script src="https://unpkg.com/fabric@4.6.0/dist/fabric.min.js"></script>

本文使用了 Vite 构建的项目，所以可以使用 import 引入

import { fabric } from 'fabric'

2. 创建 canvas 容器

在 HTML 中创建 <canvas>，并设置容器的 id 和 宽高，width/height

<canvas width="400" height="400" id="c" style="border: 1px solid #ccc;"></canvas>

这里创建了一个 canvas 容器，id="c"。
指定长宽都为 400px ，值得注意的是，这里不需要加 px 这个单位。
style="border: 1px solid #ccc;" 这句其实可以不加，这里只是为了在浏览器看到 canvas 元素到底在哪。

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

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

<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric' // 引入 fabric

function init() {
  const canvas = new fabric.Canvas('c') // 这里传入的是canvas的id

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

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

// 需要在页面容器加载完才能开始初始化（页面加载完才找到 canvas 元素）
// onMounted 是 Vue3 提供的一个页面生命周期函数：实例被挂载后调用。
// onMounted 官方文档说明：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html
onMounted(() => {
  init() // 执行初始化函数
})
</script>

就算我不写备注也可以看出 Fabric.js 的代码是极具语义化的，看单词就大概能猜出代码效果。

如果是用原生的 canvas 方法来写，没了解过的同学根本看不懂在写啥。

详情链接：
https://juejin.cn/post/7026941253845516324