CVAT Points 模式实战：面部关键点标注一次讲透（68 点）

CVAT Points 模式实战面部关键点标注一次讲透68 点【免费下载链接】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先说任务一张 AffectNet 风格的人脸图要按顺序打 68 个关键点——眼角各 2 个、鼻孔 1 个、嘴角 1 个。矩形框表达不了位置多边形画起来又太浪费。CVAT 里专门有个工具解决这件事Points 模式也就是 CVAT 点集标注的专用入口。本文用这个真实任务带你看它怎么用以及PointsShape/PointsTrack在前端核心库里的实现逻辑。 任务背景不是在脸上打点这么简单Points 模式在官方文档里定位就是人脸与 landmarks关键点标注。要标的对象是一组离散坐标而不是一个区域。同样的逻辑也适用于身体姿态比如下图中橄榄球运动员身上的各个关节点每个点都没有内部姿态标注本质上就是每个人身上固定 N 个点。CVAT 身体姿态关键点标注示例这一点决定了它的交互特性对象没有边界所以选中、删除、微调全部以单个点为粒度。快速上手从选中工具到画完的最短路径选工具在左侧控制面板点Points弹出 Draw new points 对话框。选标签在 Label 选择器里挑一个标签。设点数在Number of points输入框填数字例如 68留空则点数不限。进入绘制点Shape按钮单帧图形或Track按钮跨帧轨迹。落点与结束在画布上依次点击落点若第 3 步填了数字落满即自动完成留空则需再按一次N或点顶部Done结束。固定 68 个关键点怎么设这个输入框与多边形、折线工具共用取值会先被限制区间再向下取整见 draw-shape-popover.tsx#L156-L199。其中minimumPoints是图形类型的最小点数Points 为 1填 68 之后一旦落满第 68 个点绘制就自动停止这就是达到数量自动收尾的来源。交互行为深潜一次落下的点为什么是一个整体进入绘制模式后从开始到结束点击的所有点会被自动归为一组互相视为关联。所以一次绘制产生的是一个点集对象而不是 68 个孤立圆点——之后可以整体拖拽右键菜单也作用在整个对象上。删除单个控制点的两种方式按住Ctrl点击目标点右键该点在菜单中选Delete point。两种方式都只动这一个点其余点不受影响。给已有图形追加新点按住Shift点击点集对象会打开 points 编辑器可以往已画好的图形里继续加点。绘制完成后对象支持整体拖拽也能单独拖动某个控制点微调位置。绘制过程中怎么移动视野滚轮缩放按住鼠标中键拖动平移。绘制中的控制点半径会除以当前缩放比例所以放大画布后圆点视觉大小保持稳定高分辨率大图上也能精准落点。 内核透视决定行为的三个判断点集合法的下限是 1 个点校验入口在 object-utils.ts#L25-L28} else if (shapeType ShapeType.POINTS) { if (points.length / 2 1) { // 点集至少要有 1 个点 throw new DataError(Points must have at least 1 points, but got ${points.length / 2}); } }注意points存的是[x1, y1, x2, y2, …]扁平数组长度除以 2 才是真实点数。PointsShape构造时会执行一次该校验PointsTrack则对每个关键帧图形各查一次0 个点的空集根本进不了数据模型。命中检测没有面只有点矩形和多边形靠到边界的距离判断命中点集不同见 points-shape.ts#L28-L38static distance(points: number[], x: number, y: number): number { const distances []; for (let i 0; i points.length; i 2) { const x1 points[i]; const y1 points[i 1]; distances.push(Math.sqrt((x1 - x) ** 2 (y1 - y) ** 2)); } return Math.min.apply(null, distances); }这段代码返回鼠标位置到所有控制点的最小距离意味着点击命中的永远是离得最近的那个点而不是某片区域——这就是删单点、微调单点操作体验的直接来源。自动收尾numberOfPoints 在哪里生效点绘制的入口是 drawPoints()它创建一个透明的 SVG 容器承载后续各点控制数量的关键行在 drawHandler.ts#L903let size this.drawData.shapeType cuboid ? 4 : this.drawData.numberOfPoints;弹窗里填的数字被直接当作本次绘制预期落点数落满即自动完成绘制留空时该值为空绘制不会自动停必须按N或Done手动结束。 轨迹与插值为什么多点不插值选Track时对象是PointsTrack插值逻辑在 points-track.ts#L31-L52protected interpolatePosition(leftPosition, rightPosition, offset): InterpolatedPosition { // interpolate only when one point in both left and right positions if (leftPosition.points.length 2 rightPosition.points.length 2) { return { points: leftPosition.points.map( (value, index) value (rightPosition.points[index] - value) * offset, ), // rotation / occluded / outside / zOrder 均继承左关键帧 }; } return { points: [...leftPosition.points], /* 其余字段同样继承左关键帧 */ }; }代码只在points.length 2即恰好存了一对 x、y时做线性插值也就是说只有左右关键帧都含 1 个点时才逐坐标按 offset 插值多点点集直接复制左关键帧位置。源码没有注释原因合理推测是多点的线性插值要求两个点集严格一一对应而真实画面里点数因遮挡、排序差异很容易对不上硬插值容易得到错误中间态保守做法是不插。所以做单点线性插值的实操是Number of points填 1 并选Track在关键帧上移动点CVAT 会自动填充中间帧。完整官方操作见 liner-interpolation-with-one-point.md。 速查与文件索引操作触发方式对应源码入口固定点数落满自动结束Number of points填数字draw-shape-popover.tsx#L156-L199进入绘制点Shape单帧/Track轨迹draw-shape-popover.tsx#L200-L216手动结束绘制再按N或点DonedrawHandler.ts#L903删除单个控制点Ctrl 点击或右键 →Delete pointpoints-shape.ts#L28-L38追加 / 微调点Shift 点击打开编辑器绘制后拖整体或单点drawHandler.ts#L1060-L1067单点轨迹线性插值Number of points填 1 Trackpoints-track.ts#L31-L52参考文件清单以仓库根目录为起点图形模型points-shape.ts、points-track.ts点数校验与命中object-utils.ts#L12-L54绘制处理器drawHandler.ts#L1060-L1067绘制弹窗draw-shape-popover.tsx#L156-L216操作文档points-in-shape-mode.md、liner-interpolation-with-one-point.md【免费下载链接】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），仅供参考