CVAT 矩形标注完全指南旋转矩形、Shift 角度吸附与 By 4 Points 四极值点绘制原理【免费下载链接】cvatComputer Vision Annotation Tool (CVAT) is a leading platform for building high-quality visual datasets for vision AI. It offers open-source, cloud, and enterprise products, as well as labeling services, for image, video, and 3D annotation with AI-assisted labeling, quality assurance, team collaboration, analytics, and developer APIs.项目地址: https://gitcode.com/GitHub_Trending/cvat/cvat本文围绕 CVAT 文档《Annotation with rectangles》展开系统讲解 CVAT 中标注矩形Rectangle的两种核心技巧通过旋转点rotation point绘制带角度的旋转矩形按住 Shift 可按 15° 固定步进旋转以及源自学术界四极值点By 4 points高效包围框绘制方法。读完后你不仅能熟练完成矩形标注的实操还能从前端源码层面理解矩形的数据表示、绘制事件流与命中测试算法的实现细节。前置知识Shape 模式与 Track 模式矩形标注发生在 CVAT 标注编辑器的绘制流程中。开始之前建议先了解两个基础概念Shape 模式单帧形状矩形只存在于当前帧Track 模式跨帧跟踪对象矩形框随对象在视频帧间延续支持自动插值Interpolate、自动边界Autoborder等能力。这两者在 CVAT 文档中分别对应 Shape mode (basics) 与 Track mode (basics)本文的所有操作包括键盘快捷键Shape、Track、Esc都建立在这两种模式之上。矩形的数据表示4 个点 旋转角在深入操作之前先明确 CVAT 中矩形是如何被表示的。从源码 cvat-core/src/annotations-objects/rectangle-shape.ts 可以确认一个矩形实例的坐标点points固定为 4 个值points [xtl, ytl, xbr, ybr]即左上角top-left与右下角bottom-right两个对角点的坐标旋转角rotation/angle作为形状属性单独存储。构造时还会通过checkNumberOfPoints校验点数合法性rectangle-shape.ts。这一表示意味着无论用两点拖拽还是四极值点方式绘制最终落盘的矩形数据结构完全一致——差异只在前端绘制交互阶段。旋转矩形rotation point、中心旋转与 15° 吸附基本操作拖动矩形上的rotation point旋转控制点即可旋转矩形旋转是围绕矩形中心进行的按住Shift再拖动旋转角度会被限制为15° 的整数倍固定角度吸附旋转过程中会实时显示当前的旋转角度数值。源码视角旋转矩形的命中测试围绕中心旋转这一点在命中测试判断光标是否在矩形内、用于点击选中中有直接体现。RectangleShape提供静态方法distance其算法rectangle-shape.ts由[xtl, ytl, xbr, ybr]求出矩形中心(cx, cy)将光标坐标(x, y)以-angle绕中心做反向旋转rotatePoint把旋转的矩形问题转换回正放矩形坐标系若旋转后的点不落在[xtl, xbr] × [ytl, ybr]区间内返回null光标在框外否则返回该点到四条边的最短距离min(rotX - xtl, rotY - ytl, xbr - rotX, ybr - rotY)这个距离可用于判断光标是否靠近框边决定显示移动/缩放手柄等行为。也就是说旋转并不改变矩形的存储结构选中与编辑逻辑始终通过绕中心旋转坐标系来处理这也解释了为什么 UI 上的旋转是围绕中心点而非某个角点。By 4 Points四极值点快速绘制矩形这是文档介绍的第二种矩形绘制方法也是本篇的实操重点。该方法是一种高效的包围框bounding box标注方式最早由一篇学术论文arXiv:1708.02750提出与其拖出一个近似框再手动修正不如直接点击目标物体的四个极值点让算法自动推导出正交包围盒。第一步在绘制选项中切换到 By 4 Points按下SShape或TTrack进入绘制模式前先打开 Draw new rectangle 弹窗在Drawing method中选择By 4 points该选项在 UI 源码中对应 draw-shape-popover.tsx仅当 2D 场景下形状类型为矩形时渲染Radio.Group提供By 2 Points经典拖拽与By 4 Points四极值点两个互斥选项。选项值来自前端画布包的枚举canvasModel.tsexport enum RectDrawingMethod { CLASSIC By 2 points, EXTREME_POINTS By 4 points, }第二步依次点击物体的四个极值点按Shape或Track进入绘制模式后依次点击物体轮廓上的四个物理极值点最上top-most点最下bottom-most点最左left-most点最右right-most点。点击第四个点后绘制自动完成无需再次确认按Esc可随时取消编辑。四极值点绘制过程如下动图所示源码视角drawBoxBy4Points 的完整事件流四极值点的绘制实现在画布绘制处理器中。入口在 drawHandler.ts当形状类型为rectangle且rectDrawingMethod RectDrawingMethod.EXTREME_POINTS时调用drawBoxBy4Points()否则走经典的两点拖拽drawBox()。drawBoxBy4Points的具体逻辑drawHandler.ts以隐藏折线收集点击点在 SVG 画布上创建一个opacity: 0、stroke-width: 0的临时polygon通过其 SVG 绘制插件的drawstart/drawpoint/undopoint事件统计已点击的点数支持撤销一个点第四点触发完成当numberOfPoints 4时调用getBBox()取得四个极值点的最小外接正交矩形axis-aligned bounding box即points [bbox.x, bbox.y, bbox.x bbox.width, bbox.y bbox.height]归一化为标准矩形坐标经getFinalRectCoordinates(points, true)换算为画布坐标系下的[xtl, ytl, xbr, ybr]约束校验后提交调用checkConstraint(rectangle, [xtl, ytl, xbr, ybr])校验例如非空尺寸通过后以points: [xtl, ytl, xbr, ybr]和绘制耗时Date.now() - this.startTimestamp调用onDrawDone交由上层创建 Shape/Track 对象。可以看到四极值点 → 自动完成的本质就是以四个极值点构造的最小外接正交矩形恰好等价于目标的正交包围盒因此该方法在保证框选精度的同时避免了拖拽式绘制的反复修正。这也与上文的数据表示一致——最终提交的坐标正是[xtl, ytl, xbr, ybr]四点结构。质量与回归验证CVAT 的 Cypress 端到端测试中矩形 Shape 与 Track 标签的创建流程有专门用例覆盖可参考 tests/cypress/e2e/actions_objects2/case_8_rectangle_shape_track_label.js该文件中的四极值点绘制场景也验证了第四点自动完成的交互契约。若你在自建标注流程或二次开发中修改了绘制交互可直接运行相关端到端用例回归。小结能力操作要点对应源码位置旋转矩形拖动 rotation point绕中心旋转Shift 吸附 15° 步进并实时显示角度rectangle-shape.ts绕中心旋转的命中测试绘制方式选择Draw new rectangle 弹窗中选择 By 2 Points / By 4 PointscanvasModel.ts、draw-shape-popover.tsx四极值点绘制依次点击上、下、左、右四个极值点第四点自动完成Esc 取消drawHandler.ts统一数据表示无论哪种方式矩形均为[xtl, ytl, xbr, ybr] 旋转角rectangle-shape.ts掌握这两种绘制方式后你可以按任务类型灵活选择需要带角度框如倾斜的车辆、建筑时用旋转矩形对大量正交目标的标注追求速度时By 4 Points 能以更少的修正操作达到更高的框选精度。【免费下载链接】cvatComputer Vision Annotation Tool (CVAT) is a leading platform for building high-quality visual datasets for vision AI. It offers open-source, cloud, and enterprise products, as well as labeling services, for image, video, and 3D annotation with AI-assisted labeling, quality assurance, team collaboration, analytics, and developer APIs.项目地址: https://gitcode.com/GitHub_Trending/cvat/cvat创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考