Fabric.js实战：5分钟搞定一个可拖拽缩放的白板（Vue3版）

原创

于 2026-03-05 00:35:13 发布 · 255 阅读

Fabric.js 极速上手：5分钟构建你的第一个可拖拽缩放白板（Vue 3 实战）

你是否曾为在网页上实现一个交互式绘图区域而头疼？原生 Canvas API 虽然强大，但处理拖拽、缩放、旋转这些交互，光是事件监听和坐标计算就足以让人望而却步。如果你正需要一个快速、轻量级的解决方案来为你的应用添加白板或图形编辑功能，那么 Fabric.js 配合 Vue 3 的组合，可能就是你在寻找的“瑞士军刀”。

这篇文章不是一篇面面俱到的 Fabric.js 百科全书，而是一份极简行动指南。我们的目标非常明确：在最短的时间内，用最少的代码，构建一个具备核心交互（拖拽、缩放）的白板。这非常适合用于产品原型演示、教学示例，或是作为你复杂图形应用的一个坚实起点。我们聚焦于“最小可行产品”（MVP）思维，省略一切非必要的复杂功能，让你能立刻看到成果，并理解其运作原理。

1. 环境搭建与项目初始化

在开始敲代码之前，我们需要一个干净的工作台。我们将使用 Vite 来快速搭建一个 Vue 3 项目，这比传统的 Vue CLI 更轻快，启动速度也更快。

首先，打开你的终端，执行以下命令来创建项目：

npm create vue@latest vue-fabric-whiteboard

创建过程中，命令行会提示你进行一些配置选择。为了保持项目的纯粹和快速启动，我们做如下选择：

Add TypeScript? -> No （为了简化，我们先不用）
Add JSX Support? -> No
Add Vue Router for Single Page Application? -> No
Add Pinia for state management? -> No
Add Vitest for Unit Testing? -> No
Add an End-to-End Testing Solution? -> No
Add ESLint for code quality? -> Yes （代码规范很重要，建议保留）

项目创建完成后，进入项目目录并安装必要的依赖：

cd vue-fabric-whiteboard
npm install

接下来，安装我们今天的核心主角——Fabric.js：

npm install fabric

提示：Fabric.js 是一个功能极其丰富的库，但我们今天只用到其冰山一角。它的核心价值在于将 Canvas 中的图形抽象为可交互的对象，让你能用面向对象的方式操作画布元素。

安装完成后，你可以通过 npm run dev 启动开发服务器。如果一切顺利，浏览器打开 http://localhost:5173 应该能看到 Vue 的欢迎页面。现在，清空 src/App.vue 文件，我们将从这里开始构建。

2. 核心画布：初始化与基础图形绘制

一切图形交互的舞台都是画布（Canvas）。在这一节，我们将完成画布的初始化，并实现添加基础图形（矩形、圆形）的功能。你会看到，用 Fabric.js 在画布上“放置”一个可交互的图形，简单到令人惊讶。

首先，在 src/App.vue 中，我们构建最基本的组件结构。注意，我们使用了 Vue 3 的 <script setup> 语法，这让组合式 API 的代码更加简洁。

<template>
  <div class="app">
    <div class="toolbar">
      <button @click="addRect">添加矩形</button>
      <button @click="addCircle">添加圆形</button>
      <button @click="clearCanvas">清空白板</button>
    </div>
    <canvas ref="canvasEl" width="800" height="500"></canvas>
  </div>
</template>

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

// 1. 获取 Canvas DOM 元素的引用
const canvasEl = ref(null)
// 2. 声明一个变量来持有 Fabric Canvas 实例
let canvas = null

onMounted(() => {
  // 3. 在组件挂载后，初始化 Fabric Canvas
  //    第一个参数是 Canvas 元素的 DOM 对象，第二个是配置项
  canvas = new fabric.Canvas(canvasEl.value, {
    backgroundColor: '#f8f9fa', // 设置一个浅灰色背景，更接近真实白板
    selection: true, // 启用多选（框选）
    preserveObjectStacking: true, // 保持对象堆叠顺序
  })

  // 4. （可选）监听画布变化，方便调试
  canvas.on('object:modified', (e) => {
    console.log('对象被修改了:', e.target)
  })
})

onUnmounted(() => {
  // 5. 组件销毁时，清理画布资源，防止内存泄漏
  if (canvas) {
    canvas.dispose()
  }
})

// 6. 添加矩形函数
function addRect() {
  // 创建一个 Fabric 矩形对象
  const rect = new fabric.Rect({
    left: Math.ran

标签