[特殊字符] Vue 3 + Fabric.js：我造了一个支持旋转矩形（OBB）的 Web 标注工具

Jokenplus

墨衍会员 · AI 创作全网分发码龄7年

关注

原创最新推荐文章于 2026-03-19 01:38:10 发布 710 阅读 AI 写同款· GEO 优化 ›

vue2+Fabric.js库的使用（1）--Fabric的介绍基于vue2+Fabric.js进行项目搭建，开发图形编辑器阅读详情

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

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

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

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

它主要解决了三个痛点：

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

AABB 与 OBB 双模式切换
这是最硬核的功能。很多工具只能画正框，但这个工具支持：

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

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

鼠标中心缩放：指哪打哪，不用反复拖滚动条。
中键平移：按住中键（或 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+ 即可。