CVAT 立方体Cuboid标注完全指南4 点绘制法与矩形绘制法详解【免费下载链接】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 官方文档与源码的立方体Cuboid标注实操指南面向需要在图像中对汽车、箱子等三维物体进行立体框标注的标注员与开发者。读完本文你将掌握立方体工具的两种绘制方法by 4 points与from rectangle的完整操作流程、背后的几何建模原理8 顶点 / 12 边 / 6 面与灭点算法以及创建后的编辑与透视调整技巧。立方体标注用于在二维图像中标记三维物体如汽车、箱子等是 CVAT 面向自动驾驶、智慧城市等视觉 AI 场景的核心标注能力之一。根据 annotation-with-cuboids 总览该功能当前支持单点透视one point perspective并约束垂直边严格平行于画面两侧因此在标注时只需专注于可见面的几何关系系统会自动补齐不可见部分。开始之前选择工具与绘制方法在开始绘制前需要完成两步准备确保选中Cuboid标注工具——即当前激活的标注形状类型为立方体选择一种绘制方法from rectangle从矩形绘制或by 4 points通过 4 点绘制。在 CVAT 画布层的代码中这两种方法被正式定义为CuboidDrawingMethod枚举见 canvasModel.tsexport enum CuboidDrawingMethod { CLASSIC From rectangle, // 从矩形绘制经典方式 CORNER_POINTS By 4 points,// 通过 4 个角点绘制 }该枚举会随绘制指令写入DrawData.cuboidDrawingMethodcanvasModel.ts并在绘制处理器 drawHandler.ts 中根据取值分发到不同的绘制流程if (this.drawData.cuboidDrawingMethod CuboidDrawingMethod.CORNER_POINTS) { this.drawCuboidBy4Points(); // 4 点绘制 } else { this.drawCuboid(); // 矩形绘制 }选中绘制方法后还需要选择标注模式Shape形状模式用于逐帧标注独立形状Track轨道模式则用于跨帧追踪同一物体详见 track-mode-basics。绘制立方体前请先进入Shape模式。方法一通过 4 点绘制立方体By 4 points操作步骤选择绘制方法by 4 points选择Shape进入绘制模式在画布上依次放置4 个点绘制将自动完成。4 个点的语义分工非常明确前 3 个点决定立方体的平面plane最后一个点决定该平面的深度depth。官方文档特别给出了一个高价值建议对于前 3 个点推荐只绘制距离相机最近的两个侧面以及顶面和底面。这样既能充分利用可见面的几何信息又能让系统自动推导出被遮挡的部分减少点位置的主观误差。源码原理从 4 个点到 8 个顶点「画 4 个点自动补全为完整立方体」看起来神奇但其几何逻辑在 cuboid.ts 的cuboidFrom4Points()中清晰可读补全第一个平面前 3 个点构成一个平面代码利用p2 → p3的向量把p0 vector计算为平面上的第 4 个点形成四边形unsortedPlanePoints.push(...)顺时针排序通过sortPointsClockwise()按中心角排序并反转保证平面 4 点按顺时针顺序排列cuboid.ts计算深度方向第 4 个点p3相对p2的向量vec被复制到平面每个顶点上生成背面平面plane2plane2.p1 plane1.p1 vec…判断朝向根据vec与水平轴的夹角atan2(vec.y, vec.x)判断立方体朝向右 / 左 / 上 / 下落入不同分支生成 8 个顶点的坐标序列。生成的 8 个顶点随后交由CuboidModel管理。从 cuboid.ts 可以看到完整模型8 个点points、12 条边edgeList前左/前右/后左/后右/前顶/左顶/右顶/后顶/前底/左底/右底/后底、6 个面facesList前/右/背/左/顶/底。每次构造时还会自动计算灭点vanishing pointvpl/vpr并构建背面边buildBackEdge这正是文档所述自动完成绘制的实现基础。方法二从矩形绘制立方体From rectangle操作步骤选择绘制方法from rectangle选择Shape进入绘制模式用边界框bounding box框选物体的正面frontal plane松开鼠标后立方体生成其深度depth与透视perspective可在后续编辑中调整。源码原理矩形到立方体的转换矩形绘制流程对应 drawHandler.ts 的drawCuboid()画布层先用 SVGrect绘制交互矩形监听drawstop事件读取矩形四角坐标[xtl, ytl, xbr, ybr]const d { x: (xbr - xtl) * 0.1, y: (ybr - ytl) * 0.1 }; this.onDrawDone({ shapeType, points: cuboidFrom4Points([xtl, ybr, xbr, ybr, xbr, ytl, xbr d.x, ytl - d.y]), clientID, });可以看到关键细节系统把矩形底边两点(xtl, ybr)、(xbr, ybr)与顶边一点(xbr, ytl)作为前 3 点第 4 个点由(xbr, ytl)沿右上方偏移矩形宽高各 10%得到d (xbr - xtl) * 0.1即默认给出一个向右后方的深度方向这 4 个点随后仍交给cuboidFrom4Points()完成完整的 8 顶点构建。因此矩形法本质上是4 点法的一种自动化变体用边界框固定正面平面深度方向由系统按 10% 比例预置之后再由用户微调深度与透视。此外drawHandler.ts 在生成前会调用checkConstraint(cuboid, ...)校验最小尺寸等约束。源码级原理立方体的几何模型与数据约束8 顶点、16 个坐标的硬约束无论是哪种绘制方法最终产物都是8 个顶点16 个坐标值。这一约束在数据层被强制校验cvat-core的 object-utils.ts 中checkNumberOfPoints()明确规定} else if (shapeType ShapeType.CUBOID) { if (points.length / 2 ! 8) { throw new DataError(Cuboid must have 8 points, but got ${points.length / 2}); } }任何少于或多于 8 个顶点的立方体数据都会被拒绝保证了标注数据格式的严格一致。边、面与灭点在画布层CuboidModelcuboid.ts用索引对定义了 12 条边与 6 个面4 条竖直边前左fl、前右fr、后左dl、后右dr8 条水平边前顶/后顶/左顶/右顶、前底/后底/左底/右底6 个面front / right / dorsal背面/ left / top / bot。构造时updateVanishingPoints()通过求两直线交点得到左右灭点vpl、vpr平行线在透视投影下的汇聚点buildBackEdge()再利用灭点与已知边相交自动生成背面两个顶点cuboid.ts。这一机制保证了只要用户画出可见面系统即可按透视规则补全不可见面——这是4 点自动补全与矩形法自动生成立方体两大特性的共同根基。同时模型通过updateOrientation()判断立方体朝向LEFT/RIGHT并在computeSideEdgeConstraints()中基于MIN_EDGE_LENGTH 3consts.ts对侧边拖拽施加最小长度约束避免把形状拖成退化图形。命中检测与凸包创建之后鼠标交互选中、拖拽依赖CuboidShapecuboid-shape.ts的几何能力makeHull()基于 Andrew 单调链算法计算 8 个顶点的凸包contain()用**环绕数winding number**判断点是否落在立方体投影轮廓内distance()计算点到轮廓边的最短垂距用于拖拽吸附与边界高亮。这些实现使得立方体在画布上可以像普通多边形一样被稳定选中、拖拽和编辑。创建立方体后的编辑与透视调整立方体的绘制并不止于生成创建后还可以通过多种方式继续精修详见 editing-the-cuboid整体移动直接拖拽前脸front face背后的区域即可平移整个立方体沿边延伸拖拽每条边中点的控制点可以沿该方向延伸立方体上下拉伸拖拽顶点处的控制点可以向上 / 向下扩展立方体添加透视效果绘制时应假设前脸离相机最近按住Shift拖拽不在灰色前脸上的顶点即可创建透视效果重置透视右键点击立方体选择Reset perspective即可恢复为规则立方体切换透视朝向右键点击立方体选择Switch perspective orientation可把灰色前脸与相邻可见侧面互换注意该操作会同时重置透视效果单面编辑左、右、背面相对于灰色前脸可以单独拖拽独立于立方体其余部分移动轨道模式立方体同样支持在Track模式中使用用法与矩形轨道标注一致参见 track-mode-basics。提示灰色网格线标出的面即前脸它是透视与朝向编辑的基准面理解这一点后上面提到的以某面为基准编辑就非常直观了。实践建议与注意事项结合官方文档与源码给出以下实践要点优先使用 4 点法且只画可见面前 3 点聚焦于最近的两个侧面与顶/底面让系统通过灭点算法自动补全背面标注精度更高牢记几何约束当前实现仅支持单点透视且垂直边必须平行于画面两侧见 _index.md极端视角下的物体可能不适合用立方体标注矩形法适合快速打底先用from rectangle框出正面快速生成再通过编辑操作调整深度与透视是大批量标注时效率更高的路径透视操作记住Shift键只有按住Shift拖拽非前脸顶点才会产生透视效果普通拖拽只会平移顶点数据格式可预期无论何种绘制方式最终都会规约为 8 顶点16 坐标的规范数据便于下游模型训练与数据集导出直接消费。如需了解其他形状类型矩形、多边形、椭圆、折线、关键点、骨架等的选择依据可参考 types-of-shapes形状模式下的通用操作与快捷键参见 shape-mode-basics。【免费下载链接】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），仅供参考 
长河君 · 2026/9/14 1:37:33 · 阅读 1.2k CVAT 立方体（Cuboid）标注完全指南：4 点绘制法与矩形绘制法详解
CVAT 立方体Cuboid标注完全指南4 点绘制法与矩形绘制法详解【免费下载链接】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 官方文档与源码的立方体Cuboid标注实操指南面向需要在图像中对汽车、箱子等三维物体进行立体框标注的标注员与开发者。读完本文你将掌握立方体工具的两种绘制方法by 4 points与from rectangle的完整操作流程、背后的几何建模原理8 顶点 / 12 边 / 6 面与灭点算法以及创建后的编辑与透视调整技巧。立方体标注用于在二维图像中标记三维物体如汽车、箱子等是 CVAT 面向自动驾驶、智慧城市等视觉 AI 场景的核心标注能力之一。根据 annotation-with-cuboids 总览该功能当前支持单点透视one point perspective并约束垂直边严格平行于画面两侧因此在标注时只需专注于可见面的几何关系系统会自动补齐不可见部分。开始之前选择工具与绘制方法在开始绘制前需要完成两步准备确保选中Cuboid标注工具——即当前激活的标注形状类型为立方体选择一种绘制方法from rectangle从矩形绘制或by 4 points通过 4 点绘制。在 CVAT 画布层的代码中这两种方法被正式定义为CuboidDrawingMethod枚举见 canvasModel.tsexport enum CuboidDrawingMethod { CLASSIC From rectangle, // 从矩形绘制经典方式 CORNER_POINTS By 4 points,// 通过 4 个角点绘制 }该枚举会随绘制指令写入DrawData.cuboidDrawingMethodcanvasModel.ts并在绘制处理器 drawHandler.ts 中根据取值分发到不同的绘制流程if (this.drawData.cuboidDrawingMethod CuboidDrawingMethod.CORNER_POINTS) { this.drawCuboidBy4Points(); // 4 点绘制 } else { this.drawCuboid(); // 矩形绘制 }选中绘制方法后还需要选择标注模式Shape形状模式用于逐帧标注独立形状Track轨道模式则用于跨帧追踪同一物体详见 track-mode-basics。绘制立方体前请先进入Shape模式。方法一通过 4 点绘制立方体By 4 points操作步骤选择绘制方法by 4 points选择Shape进入绘制模式在画布上依次放置4 个点绘制将自动完成。4 个点的语义分工非常明确前 3 个点决定立方体的平面plane最后一个点决定该平面的深度depth。官方文档特别给出了一个高价值建议对于前 3 个点推荐只绘制距离相机最近的两个侧面以及顶面和底面。这样既能充分利用可见面的几何信息又能让系统自动推导出被遮挡的部分减少点位置的主观误差。源码原理从 4 个点到 8 个顶点「画 4 个点自动补全为完整立方体」看起来神奇但其几何逻辑在 cuboid.ts 的cuboidFrom4Points()中清晰可读补全第一个平面前 3 个点构成一个平面代码利用p2 → p3的向量把p0 vector计算为平面上的第 4 个点形成四边形unsortedPlanePoints.push(...)顺时针排序通过sortPointsClockwise()按中心角排序并反转保证平面 4 点按顺时针顺序排列cuboid.ts计算深度方向第 4 个点p3相对p2的向量vec被复制到平面每个顶点上生成背面平面plane2plane2.p1 plane1.p1 vec…判断朝向根据vec与水平轴的夹角atan2(vec.y, vec.x)判断立方体朝向右 / 左 / 上 / 下落入不同分支生成 8 个顶点的坐标序列。生成的 8 个顶点随后交由CuboidModel管理。从 cuboid.ts 可以看到完整模型8 个点points、12 条边edgeList前左/前右/后左/后右/前顶/左顶/右顶/后顶/前底/左底/右底/后底、6 个面facesList前/右/背/左/顶/底。每次构造时还会自动计算灭点vanishing pointvpl/vpr并构建背面边buildBackEdge这正是文档所述自动完成绘制的实现基础。方法二从矩形绘制立方体From rectangle操作步骤选择绘制方法from rectangle选择Shape进入绘制模式用边界框bounding box框选物体的正面frontal plane松开鼠标后立方体生成其深度depth与透视perspective可在后续编辑中调整。源码原理矩形到立方体的转换矩形绘制流程对应 drawHandler.ts 的drawCuboid()画布层先用 SVGrect绘制交互矩形监听drawstop事件读取矩形四角坐标[xtl, ytl, xbr, ybr]const d { x: (xbr - xtl) * 0.1, y: (ybr - ytl) * 0.1 }; this.onDrawDone({ shapeType, points: cuboidFrom4Points([xtl, ybr, xbr, ybr, xbr, ytl, xbr d.x, ytl - d.y]), clientID, });可以看到关键细节系统把矩形底边两点(xtl, ybr)、(xbr, ybr)与顶边一点(xbr, ytl)作为前 3 点第 4 个点由(xbr, ytl)沿右上方偏移矩形宽高各 10%得到d (xbr - xtl) * 0.1即默认给出一个向右后方的深度方向这 4 个点随后仍交给cuboidFrom4Points()完成完整的 8 顶点构建。因此矩形法本质上是4 点法的一种自动化变体用边界框固定正面平面深度方向由系统按 10% 比例预置之后再由用户微调深度与透视。此外drawHandler.ts 在生成前会调用checkConstraint(cuboid, ...)校验最小尺寸等约束。源码级原理立方体的几何模型与数据约束8 顶点、16 个坐标的硬约束无论是哪种绘制方法最终产物都是8 个顶点16 个坐标值。这一约束在数据层被强制校验cvat-core的 object-utils.ts 中checkNumberOfPoints()明确规定} else if (shapeType ShapeType.CUBOID) { if (points.length / 2 ! 8) { throw new DataError(Cuboid must have 8 points, but got ${points.length / 2}); } }任何少于或多于 8 个顶点的立方体数据都会被拒绝保证了标注数据格式的严格一致。边、面与灭点在画布层CuboidModelcuboid.ts用索引对定义了 12 条边与 6 个面4 条竖直边前左fl、前右fr、后左dl、后右dr8 条水平边前顶/后顶/左顶/右顶、前底/后底/左底/右底6 个面front / right / dorsal背面/ left / top / bot。构造时updateVanishingPoints()通过求两直线交点得到左右灭点vpl、vpr平行线在透视投影下的汇聚点buildBackEdge()再利用灭点与已知边相交自动生成背面两个顶点cuboid.ts。这一机制保证了只要用户画出可见面系统即可按透视规则补全不可见面——这是4 点自动补全与矩形法自动生成立方体两大特性的共同根基。同时模型通过updateOrientation()判断立方体朝向LEFT/RIGHT并在computeSideEdgeConstraints()中基于MIN_EDGE_LENGTH 3consts.ts对侧边拖拽施加最小长度约束避免把形状拖成退化图形。命中检测与凸包创建之后鼠标交互选中、拖拽依赖CuboidShapecuboid-shape.ts的几何能力makeHull()基于 Andrew 单调链算法计算 8 个顶点的凸包contain()用**环绕数winding number**判断点是否落在立方体投影轮廓内distance()计算点到轮廓边的最短垂距用于拖拽吸附与边界高亮。这些实现使得立方体在画布上可以像普通多边形一样被稳定选中、拖拽和编辑。创建立方体后的编辑与透视调整立方体的绘制并不止于生成创建后还可以通过多种方式继续精修详见 editing-the-cuboid整体移动直接拖拽前脸front face背后的区域即可平移整个立方体沿边延伸拖拽每条边中点的控制点可以沿该方向延伸立方体上下拉伸拖拽顶点处的控制点可以向上 / 向下扩展立方体添加透视效果绘制时应假设前脸离相机最近按住Shift拖拽不在灰色前脸上的顶点即可创建透视效果重置透视右键点击立方体选择Reset perspective即可恢复为规则立方体切换透视朝向右键点击立方体选择Switch perspective orientation可把灰色前脸与相邻可见侧面互换注意该操作会同时重置透视效果单面编辑左、右、背面相对于灰色前脸可以单独拖拽独立于立方体其余部分移动轨道模式立方体同样支持在Track模式中使用用法与矩形轨道标注一致参见 track-mode-basics。提示灰色网格线标出的面即前脸它是透视与朝向编辑的基准面理解这一点后上面提到的以某面为基准编辑就非常直观了。实践建议与注意事项结合官方文档与源码给出以下实践要点优先使用 4 点法且只画可见面前 3 点聚焦于最近的两个侧面与顶/底面让系统通过灭点算法自动补全背面标注精度更高牢记几何约束当前实现仅支持单点透视且垂直边必须平行于画面两侧见 _index.md极端视角下的物体可能不适合用立方体标注矩形法适合快速打底先用from rectangle框出正面快速生成再通过编辑操作调整深度与透视是大批量标注时效率更高的路径透视操作记住Shift键只有按住Shift拖拽非前脸顶点才会产生透视效果普通拖拽只会平移顶点数据格式可预期无论何种绘制方式最终都会规约为 8 顶点16 坐标的规范数据便于下游模型训练与数据集导出直接消费。如需了解其他形状类型矩形、多边形、椭圆、折线、关键点、骨架等的选择依据可参考 types-of-shapes形状模式下的通用操作与快捷键参见 shape-mode-basics。【免费下载链接】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），仅供参考