在 Vue3 中利用 Fabric.js 搭建一个易用画板

前言

Fabric.js 是一个功能强大的 JavaScript 库，可以轻松地在 HTML5 Canvas 上创建和操作复杂的对象。它提供了许多有用的功能，包括对象创建、变换、动画、事件处理等。Vue3 是一个渐进式的 JavaScript 框架，可以轻松地构建用户界面。它具有强大的响应式系统，可以自动更新视图，并且非常容易学习和使用。

搭建画板

1. 安装依赖

首先，我们需要安装 Fabric.js 和 Vue3。在项目中，通过命令行输入以下命令：

npm install fabric vue

2. 创建项目

创建一个 Vue3 项目。在项目中，创建一个名为 App.vue 的文件，并添加以下代码：

<template>
  <div id="app">
    <canvas id="canvas" width="600" height="400"></canvas>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import fabric from 'fabric'

export default {
  setup() {
    const canvas = ref(null)

    onMounted(() => {
      const _canvas = new fabric.Canvas(canvas.value)
    })

    return {
      canvas
    }
  }
}
</script>

3. 初始化画布

在 onMounted 生命周期钩子中，我们创建了一个新的 Fabric.js 画布实例。这个实例被附加到 canvas 变量，以便我们可以以后引用它。

4. 绘制形状

Fabric.js 提供了许多方法来创建和绘制形状。例如，我们可以使用 fabric.Circle 类来创建一个圆形：

const circle = new fabric.Circle({
  radius: 20,
  fill: 'red'
})

canvas.add(circle)

这个圆形将被添加到画布上，并显示在页面上。

5. 变换形状

一旦我们创建了形状，我们就可以使用 Fabric.js 的变换方法来改变它们的属性。例如，我们可以使用 scale 方法来缩放形状：

circle.scale(2)

这个操作将使圆形变为原来的两倍大。

6. 动画形状

Fabric.js 还提供了许多方法来对形状进行动画处理。例如，我们可以使用 animate 方法来创建一个动画，使圆形从一个位置移动到另一个位置：

circle.animate('left', 100, {
  duration: 1000,
  easing: 'ease-in-out'
})

这个动画将使圆形在 1 秒内从当前位置移动到 (100, 0) 的位置。

7. 事件处理

Fabric.js 提供了许多事件处理方法，允许我们在用户与画布交互时执行特定的操作。例如，我们可以使用 on('mouse:down') 方法来侦听鼠标按下事件：

canvas.on('mouse:down', (e) => {
  // 在这里执行操作
})

当鼠标按下时，这个事件处理函数将被调用。

8. 存储和导出画布状态

Fabric.js 提供了多种方法来存储和导出画布状态。例如，我们可以使用 toJSON() 方法来将画布状态转换为 JSON 字符串：

const json = canvas.toJSON()

这个 JSON 字符串可以存储在数据库中，或者导出为文件。

结语

在本文中，我们介绍了如何使用 Fabric.js 和 Vue3 来构建一个简易的画板。我们学习了如何初始化画布、绘制形状、变换形状、动画形状、处理事件以及存储和导出画布状态。希望这篇教程对您有所帮助。