🚀 Vue 3 + Fabric.js：我造了一个支持旋转矩形（OBB）的 Web 标注工具

北安2
73 阅读4分钟

做计算机视觉（CV）的同学都知道，模型好不好，数据是老大。但找一个好用的Web 端标注工具其实挺难的。

市面上的开源工具，要么是基于老旧的 jQuery/Vanilla JS，想二改集成到现代的前端项目里非常痛苦；要么功能太简单，只能画水平框（AABB），一旦遇到航拍图、遥感、或者倾斜摆放的物体（比如货架上的商品），就束手无策了。

为了解决这个问题，也为了让标注体验能对标桌面端软件（像 LabelImg），我用 Vue 3 (TypeScript)  和 Fabric.js 撸了一个开源项目：Vue Fabric Annotator。

image (6).png

💡 为什么你要关注这个项目？

如果你是前端开发者，想学习Canvas 复杂交互；或者你是算法工程师，需要一个轻量级、能集成、支持 OBB 的数据标注后台，这个项目应该能帮到你。

它主要解决了三个痛点：

  1. 原生支持旋转矩形（OBB） ：不再是简单的拉框，支持任意角度旋转，适合高精度场景。
  2. 现代技术栈：Vue 3 + Composition API + TS + Element Plus，代码结构清晰，看着舒服，改着容易。
  3. 性能与体验：解决了 Canvas 中常见的“卡顿”和“状态不同步”问题，几百个框也能流畅跑。

✨ 核心功能：不只是画个框

1. AABB 与 OBB 双模式切换

这是最硬核的功能。很多工具只能画正框，但这个工具支持：

  • 标准模式：画水平框，适合通用物体。
  • 旋转模式：拖拽旋转控制点，或者用快捷键 R/E 精细调整角度。
  • 智能拟合：我还加了个“紧贴模式”和“正向模式”的算法，自动计算最小外接矩形，强迫症福音。

image.png

image.png

2. 像用设计软件一样标注

标注是体力活，效率第一。我参考了专业设计软件的交互逻辑：

  • 鼠标中心缩放：指哪打哪，不用反复拖滚动条。

  • 中键平移：按住中键（或 Alt）就能拖拽画布，非常顺滑。

  • 全键盘流：

    • WASD 微调尺寸（像素级调整）。
    • Ctrl+Z / Ctrl+Y 撤销重做（这是真的撤销栈，不是简单的删掉上一步）。
    • Ctrl+C / Ctrl+V 跨图复制粘贴（保留尺寸和角度，标重复物体神器）。

3. 数据管家

  • 导出格式：支持 YOLO 和 COCO 格式，导出来就能直接丢给 PyTorch 跑训练。
  • 智能避让：你肯定遇到过标注框太密，Label 文字叠在一起看不清的情况。我写了个算法，让 Label 文字自动寻找“安全位置”，尽量不遮挡关键像素。

🛠️ 技术复盘：哪怕不复用代码，思路也值得一看

作为一个开源项目，光有 UI 没用，底层的坑我都替大家踩完了。这里分享几个开发过程中遇到的技术难点：

难点一：Fabric.js 的坐标系地狱

Fabric.js 的变换矩阵（Matrix）很强，但直接拿给后端训练是个灾难。因为它包含缩放、倾斜、位移等各种参数，而后端只需要简单直观的 (cx, cy, w, h, angle)。

  • 解法：我没有直接用 Fabric 的属性，而是手写了一套几何算法。利用 QR分解 从矩阵中提取纯净的旋转角度和尺寸；同时实现了一个 getGeometricPoints 函数，反算出四个顶点的绝对世界坐标。

难点二：Vue 响应式 vs Canvas 指令式

Vue 是数据驱动的，Canvas 是对象驱动的。如果不处理好，很容易出现“数据变了画布没变”或者“画布变了数据没同步”的 Bug。

  • 解法：实现了一套严谨的双向绑定机制。利用 watch 监听 Vue 数据变化驱动 Canvas 渲染，同时利用 Fabric 的事件系统反向更新 Vue 数据。中间加了防抖（Debounce）和锁机制，防止死循环。

难点三：无损历史记录

Canvas 的 toJSON 虽然方便，但在标注场景下太重了，而且容易丢失自定义的业务属性（比如 object_id）。

  • 解法：我自己实现了一个 History Stack。在撤销/重做时，不是简单的“清空重画”，而是基于对象 ID 进行增量状态同步 (syncCanvasStateForHistory)。这样无论你撤销多少次，对象的引用关系都不会乱。

🚀 跑起来试试

环境要求 Node.js 16+ 即可。

# 1. 克隆下来
git clone https://github.com/Nuaawly/vue-fabric-annotator.git
cd vue-fabric-annotator

# 2. 装包
npm install

# 3. 跑起来
npm run dev

🤝 碎碎念

这个项目目前托管在 GitHub 上，协议是宽松的 MIT。

如果你正好需要一个 Web 标注工具，或者想研究一下 Vue3 和 Fabric.js 怎么结合，欢迎来玩！

如果有 Bug 或者新需求（比如想要多边形分割 Segmentation），欢迎提 Issue 或者 PR。如果觉得还不错，辛苦去 GitHub 点个 Star ⭐️，这对我真的很重要！

👉 GitHub 传送门：github.com/Nuaawly/vue…

avatar
文章
阅读
粉丝