CVAT 多边形编辑完全指南Shift点击进入编辑器、智能裁剪与手动切割【免费下载链接】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 官方文档《Edit polygon》展开讲解在 CVAT 标注画布上编辑多边形Polygon的完整工作流如何通过Shift点击进入多边形编辑器、如何在已有多边形上追加新顶点或闭合切割删除部分区域、以及如何利用Intelligent polygon cropping智能多边形裁剪自动决定切割方向。读完本文你将掌握多边形编辑的全部交互细节、智能裁剪的判定准则及其源码实现原理并能在实际标注任务中结合工作区设置、快捷键与其他多边形功能高效完成精细标注。上图为 CVAT「设置 → Workspace」选项卡中的Intelligent polygon cropping复选框默认开启开启时系统会自动尝试裁剪多边形。进入编辑器Shift 点击多边形CVAT 的多边形编辑与拖动顶点是两套不同的交互。按官方文档描述按住Shift的同时点击多边形即可打开多边形编辑器点击多边形边线上的任意位置会在该位置创建一个新顶点并开始一段编辑线编辑期间你绘制的编辑线以独立样式叠加在原多边形上再次点击落在原多边形的另一个顶点上即可闭合编辑线完成一次切割/增补操作。从源码看这一交互由 cvat-canvas/src/typescript/canvasView.ts 中的点击处理逻辑驱动当鼠标事件携带shiftKey时调用this.onEditStart(state)激活对象并向editHandler.edit({ enabled: true, state, pointID })传入被点击的顶点序号从而启动编辑流程。补充Shift键同时还承担其他画布职责。例如在 editHandler.ts 中按住Shift且未同时按Ctrl/Alt/Meta时会启用滑动式绘制sliding drawing——拖动鼠标即可连续追加顶点而无需逐次点击在 drawHandler.ts 中也有同样的滑动逻辑。另外按住Shift双击多边形顶点的场景下会直接提交整条多边形的点集参见 canvasView.ts 附近的dblclick处理。编辑器中的两种核心操作进入编辑器后你可以完成两类操作创建新点在编辑线路径上继续点击向多边形追加新的顶点。编辑线支持滑动式绘制按住Shift拖动鼠标连续加点参考 editHandler.ts 中基于 15px 距离阈值自动加点的逻辑。删除部分多边形把编辑线闭合到原多边形的另一个顶点上即可用新绘制的线段把原多边形切成两段随后二选一保留其中一段。编辑过程中的具体鼠标行为在 editHandler.ts 中定义左键点击e.button 0且未按Alt在编辑线上添加一个点右键点击撤销最近添加的编辑点draw(undo)。注意Alt点击有独立语义——它不会进入编辑器而是直接删除被点击的顶点见 canvasView.ts多边形剩余点数需大于 6 个坐标即至少 3 个顶点时才会执行删除。右键撤销则要求编辑线已至少包含 2 个点多边形场景避免误操作。闭合切割时发生了什么当你把编辑线闭合到原多边形的另一个顶点时底层会做一次线段替换计算对应 editHandler.ts 中的stopEdit方法读取被点击顶点序号stopPointID与起始顶点序号pointID得到切割区间[start, stop]以编辑线为界把原多边形拆成firstPart和secondPart两个候选多边形若任一候选点数不足 3 个顶点则直接取消本次编辑防止产生非法多边形随后依据智能裁剪开关决定是自动二选一还是把两个候选同时展示出来让用户手动选择。Intelligent polygon cropping自动判断该切哪边当工作区设置中的Intelligent polygon cropping选项被启用时CVAT 会依据两个准则判断自动裁剪哪一部分这正是官方文档强调的核心逻辑准则含义判定方式第一个准则切割点数number of cut points比较切割后两段分别保留的顶点数量保留顶点更少的那段更可能被裁掉第二个准则切割曲线长度length of a cut curve计算两段候选多边形的周长各顶点间欧氏距离之和周长更短的那段更可能被裁掉两个准则结论一致都建议裁掉同一部分时算法自动执行无需用户干预两个准则结论不一致时算法不会擅自决定而是把两段候选多边形同时以半透明样式展示由用户手动选择保留哪一段。源码级的判定实现上述准则在 editHandler.ts 中有直接对应实现const cutIndexes1 oldPoints.reduce( (acc: number[], _: string, i: number): number[] (i stop || i start ? [...acc, i] : acc), [], ); const cutIndexes2 oldPoints.reduce( (acc: number[], _: string, i: number): number[] (i stop i start ? [...acc, i] : acc), [], ); const curveLength (indexes: number[]): number { // 逐段计算两个相邻顶点间的欧氏距离并累加得到该候选多边形的周长 ... }; const pointsCriteria cutIndexes1.length cutIndexes2.length; const lengthCriteria curveLength(cutIndexes1) curveLength(cutIndexes2);其中pointsCriteria即切割点数准则顶点更多的一段胜出另一段被裁掉lengthCriteria即切割曲线长度准则周长更长的一段胜出。随后的决策分支editHandler.tspointsCriteria lengthCriteria intelligentCutEnabled两准则都倾向裁掉第一段自动提交第二段!pointsCriteria !lengthCriteria intelligentCutEnabled两准则都倾向裁掉第二段自动提交第一段其余情况两准则矛盾或智能裁剪被关闭把firstPart、secondPart两个候选多边形同时以fill-opacity: 0.5的半透明样式绘制出来添加cvat_canvas_shape_splitting类等待用户点击其中一段完成选择鼠标悬停时有高亮样式点击后通过selectPolygon提交见 editHandler.ts。开启/关闭该功能的入口即 editHandler.ts 中的this.intelligentCutEnabled configuration.intelligentPolygonCrop;由画布配置项intelligentPolygonCrop驱动。手动选择保留部分如果你希望完全由自己决定切割方向可以按官方文档的建议在「设置 → Workspace」中关闭Intelligent polygon cropping。此时闭合编辑线后CVAT 不会自动二选一而是同时展示两个候选多边形你只需点击想保留的那一段即可完成编辑点击后另一段会被移除原多边形被替换为所选部分。Cypress 端到端测试 tests/cypress/e2e/actions_tasks/case_67_intelligent_polygon_cropping.js 完整覆盖了这一行为先验证默认开启状态下Shift点击切割后自动保留点数更多的一段测试用例中 5 顶点多边形被切成 3 点与 4 点两段最终保留 4 点的一段再关闭开关重复切割此时界面出现.cvat_canvas_shape_splitting候选多边形点击后保留 3 点的一段。该测试也证实该选项默认处于勾选状态测试第 66-67 行注释 Should be checked by default。取消编辑Esc编辑过程中随时可以按Esc取消本次编辑所有已添加的编辑点与改动都会被丢弃多边形恢复原状。对应的源码实现为 editHandler.ts 的cancel()方法它会释放编辑状态release()并通过onEditDone(null, null)通知上层未产生任何修改。此外若闭合切割后任一候选多边形顶点数不足 3 个编辑也会被自动取消editHandler.ts。上图演示了在真实街景帧上编辑多边形顶点、随后按Esc取消编辑的交互过程。如何找到并配置该功能编辑多边形的能力无需额外开启但Intelligent polygon cropping需要到设置中确认开关状态打开标注任务进入任意一帧点击右上角用户菜单中的Settings或按快捷键F2切换到Workspace选项卡找到Intelligent polygon cropping复选框并勾选/取消点击Save保存——设置会持久化到服务器刷新页面后依然生效见 site/content/en/docs/annotation/annotation-editor/settings.md。设置界面由 cvat-ui/src/components/header/settings-modal/workspace-settings.tsx 渲染复选框的说明文案为 Try to crop polygons automatically when editing对应属性intelligentPolygonCrop。同页签还提供其他与多边形编辑相关的工作区选项例如Automatic bordering自动边界绘制/编辑多边形或多段线时自动吸附到已有对象的边缘详见 自动边界工具文档 与 editHandler.ts 中autoborderHandler.autoborder(true, ...)的启用逻辑Control points size控制画布上所有可交互点含多边形顶点的显示尺寸取值范围 2–10Default number of points in polygon approximation设置多边形近似默认点数作用于 serverless 交互器与 OpenCV 智能剪刀。与其他多边形功能的配合多边形编辑能力与 CVAT 多边形工具链中的其他功能配合使用效果最佳绘制Drawing多边形的创建与编辑是同一对象生命周期的两个阶段创建与编辑共用EditHandler/DrawHandler的底层绘制管线都基于 svg.js 的draw插件因此编辑时的画线手感与绘制时一致轨道模式Track mode对处于轨道Track中的多边形无需重建形状直接用Shift点击编辑局部即可参考 track-mode-with-polygons.md 中直接移动点或Shift点击编辑部分多边形的说明撤销Undo编辑提交后可通过CtrlZ撤销Cypress 测试 case_67 即用CtrlZ取消一次切割验证开关切换。小结CVAT 的多边形编辑以Shift点击为入口以追加顶点 闭合切割为两种基本操作以Esc为安全出口。核心的Intelligent polygon cropping特性通过切割点数与切割曲线长度双准则自动决策裁剪方向准则冲突或功能关闭时退化为双候选手动选择模式。理解这些交互与 editHandler.ts 中stopEdit的判定逻辑能帮助你在高精度分割标注中大幅减少逐点拖拽的重复劳动同时避免误裁关键区域。【免费下载链接】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），仅供参考