🖌 Vue Fabric Canvas 组件

基于 Vue 3 与 Fabric.js 的轻量画布组件，支持自由绘制、撤销/重做、画笔/橡皮擦模式切换等能力。提供即插即用的 Vue 组件接口与本地可运行的 Demo，内置移动端（H5）自适应缩放与触控优化。

📦 安装

npm i vue-fabric-canvas
# 或
yarn add vue-fabric-canvas
# 或
pnpm add vue-fabric-canvas

依赖关系

• peer: vue ^3.3.0（建议 ^3.5）
• dep: fabric ^5.2.1

🚀 快速上手

<template>
  <div class="editor-wrapper">
    <div class="toolbar">
      <button @click="setPen">画笔</button>
      <button @click="setEraser">橡皮擦</button>
      <button @click="undo" :disabled="!hasContent">撤销</button>
      <button @click="redo" :disabled="!hasContent">重做</button>
      <button @click="clear">清空</button>
    </div>

    <CanvasEditor
      ref="canvasRef"
      :imgWidth="800"
      :imgHeight="600"
      @contentChange="hasContent = $event"
    />

    <p class="status">状态：{{ hasContent ? '有内容' : '空画布' }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CanvasEditor from 'vue-fabric-canvas'

const canvasRef = ref(null)
const hasContent = ref(false)

const setPen = () => {
  canvasRef.value?.changeBrushMode('pen')
  canvasRef.value?.setBrushColor('#ff0000')
  canvasRef.value?.setBrushRange(6)
}
const setEraser = () => {
  canvasRef.value?.changeBrushMode('eraser')
  canvasRef.value?.setEraserRange(20)
}
const undo = () => canvasRef.value?.undo()
const redo = () => canvasRef.value?.redo()
const clear = () => canvasRef.value?.clear()

onMounted(() => setPen())
</script>

<style scoped>
.editor-wrapper {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: 12px;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.status {
  margin-top: 8px;
}
</style>

⚙️ 组件属性 Props

• imgWidth: number 必填，画布宽度
• imgHeight: number 必填，画布高度

🔁 事件 Events

• contentChange(hasContent: boolean) 当历史栈发生变化时触发，用于告知是否有内容

🧩 暴露方法 Exposed methods

• changeBrushMode(type: 'pen' | 'eraser' | 'select') 切换绘制模式
• setBrushColor(color: string) 设置画笔颜色
• setBrushRange(size: number) 设置画笔大小
• setEraserRange(size: number) 设置橡皮擦大小
• undo() 撤销
• redo() 重做
• clear() 清空画布

📱 移动端适配说明

• 组件内部通过 ResizeObserver 自动监听父元素宽度，按 imgWidth 等比例缩放到当前容器宽度并同步更新画布缩放、画笔/橡皮擦粗细。
• 默认开启触控交互（阻止浏览器双指缩放与滚动）；如需在外层保留滚动，建议给容器（如 .editor-wrapper）自定义滚动区域。
• 如果在旧环境中缺少 ResizeObserver，组件会退回到 window.resize 监听；若需兼容更老机型，可自行引入 polyfill。
• 请确保外层容器有明确宽度（例如 100% 或固定像素），否则画布将无法计算缩放比例。

🧪 本地 Demo（仅仓库内用于预览，不会随 npm 发布）

项目内自带 demo/ 目录用于本地预览：

npm run dev
# 打开浏览器访问输出的本地地址（通常为 http://localhost:5173）

通过 package.json 的 files 字段控制，发布到 npm 时只包含 src 与 README.md，不会把 demo 一并发布。

🧽 关于橡皮擦（EraserBrush）说明

• 标准 npm fabric 包的默认构建通常不包含 EraserBrush（它属于 Erasing 模块）。
• 本组件内置了“回退逻辑”：当 fabric.EraserBrush 不存在时，使用白色 PencilBrush 来模拟擦除效果，并将画布背景设为白色，保证整体观感。
• 如果你需要真正的橡皮擦：
  • 使用包含 Erasing 的 Fabric 自定义构建，或
  • 使用社区包 fabric-with-erasing 并从中导入。

🛠 常见问题

1. 运行 demo 报错找不到 vue 类型？

   • 请确保已安装依赖：npm i
   • 若编辑器类型服务报错，可尝试重启 VSCode 的 TypeScript/Volar 服务。

2. 为什么切换“橡皮擦”不生效？

   • 可能因为当前 fabric 构建缺少 EraserBrush，组件会回退为“白色画笔模拟”。若需要真实擦除效果，请使用带 Erasing 模块的构建或 fabric-with-erasing。

3. 我能否在选择模式中拖动对象？

   • 本组件聚焦自由绘制（free drawing）。如需选择/拖动对象，可将 changeBrushMode('select') 作为扩展点，自行添加对象管理逻辑。

📄 许可证

MIT © 孙赞