Label Studio VectorLabels 标签详解图像矢量路径、闭合多边形与骨架标注【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studioLabel Studio 的VectorLabels标签用于在图像上创建带标签的矢量路径vector path适用于语义分割、关键点标注、道路/边界提取等机器学习与数据科学任务。本文完整讲解该标签的交互操作加点、移动、删除、多选、闭合、骨架模式、全部配置参数及结果序列化格式并结合编辑器源码说明其坐标系统与底层实现原理。读完本文你将掌握如何通过标注配置labeling config组合VectorLabels与Label标签实现矢量路径、闭合多边形、分支骨架和单点关键点等多种标注方案。概览什么是 VectorLabelsVectorLabels是 Label Studio 中面向图像数据image的标签控件通过点击画布逐点绘制矢量路径来标注对象。与RectangleLabels、PolygonLabels等几何标注不同VectorLabels的核心能力是自由路径既可以画开放折线polyline也可以闭合为多边形polygon还能通过skeleton模式绘制带分支的骨架路径如树枝、网络图、骨骼关键点。在编辑器前端源码中该标签在 web/libs/editor/src/tags/control/VectorLabels.jsx 中注册其核心模型组合了ControlBase、LabelsModel、VectorModel、LabelMixin与SelectedModelMixin并通过Registry.addTag(vectorlabels, ...)注册为vectorlabels标签类型。它的受控目标类型被约束为Image见该文件中的Validation.controlledTags意味着它必须挂载在Image对象标签之上。基础操作路径与点的交互VectorLabels的绘制基于「点」与「路径段」两个概念。下表总结了最常用的基础交互操作说明添加点在空白处单击鼠标。在路径段上添加点按住Shift键同时点击两个点之间的路径段即可在该段上插入一个新点。结束或退出路径按Esc键或双击路径上最后添加的点。移动点单击某个点并拖动即可重新定位。删除点按住AltmacOS 为Option并点击已存在的点。注意部分高级操作要求你先完成路径再把它重新选中为区域region。最便捷的方式是在标注设置位于标注流与 Quick View 中标注界面下方中开启Select region after creating it创建后选中区域也可以先退出路径再点击路径内的某条路径段或在右侧Regions面板中点击对应区域来重新选中。被选中的路径会以红色高亮显示因此为矢量路径选择标签颜色时应避免使用红色以免与选中态混淆。源码层面VectorLabels.jsx的注释中还补充了更多精细交互Shift 拖拽可创建带控制手柄的贝塞尔点Shift 点击点可在普通点与贝塞尔点之间转换Alt 点击闭合路径的某条段可断开闭合路径见后文「闭合路径」一节。高级功能多选Multi-select开启多选后你可以批量拖动多个点进行整体位移或缩放操作说明多选路径内所有点按住Cmd或Ctrl后点击路径中的任意一个点。多选路径中的个别点先将路径选中为区域见上文提示再按住Cmd或Ctrl依次点击要选择的点。多选多条路径使用移动工具箭头框选/拖选多条路径或形状。缩放多条路径用移动工具选中多条路径后拖动选择框中的控制点进行缩放。清除选择点击任意点或按Esc键。多选后的批量变换在底层由web/libs/editor/src/components/KonvaVector/VectorTransformer.tsx实现支持对选中点集进行旋转、缩放与平移VectorRegion.jsx中的transformMode与supportsRotate/supportsScale等属性即对应这一模式。闭合路径Closed paths通过配置closabletrueVectorLabels可以创建闭合路径从而形成多边形形状操作说明闭合路径双击最后添加的点系统会自动在第一个点与最后一个点之间补上一条线段。断开闭合路径按住Alt或Option并点击闭合路径中的某条路径段即可将其重新打开再点击某个点则可删除该点。闭合语义在 web/libs/editor/src/regions/VectorRegion.jsx 中有明确实现区域模型的closed字段默认为false而closable视图会综合「区域是否已闭合」与「控件的closable参数」两个条件判断incomplete/finished状态机则依据minPoints、maxPoints与closed决定路径是否绘制完成例如 SAM2 生成的闭合轮廓即使控件closable为 false 也会被视为可闭合见该文件 L114-L148 的注释。骨架模式Skeleton配置skeletontrue可启用骨架模式用于绘制分支路径branching paths启用后新添加的点会连接到当前活动点active point而非最后一个添加的点从而允许在一条主路径上分出多条分支。这一模式适合标注树状结构Tree、网络拓扑、以及解剖学特征如骨骼关键点连线等场景。从源码看骨架逻辑位于 web/libs/editor/src/components/KonvaVector/skeleton.ts由VectorRegion.jsx中的isVectorSkeletonEnabled引入VectorLabels.jsx的模型定义中skeleton参数默认值为false。使用示例以下示例均来自 docs/source/tags/vectorlabels.md 文档可直接粘贴到 Label Studio 的标注配置中。基础矢量路径最基础的用法在图像上绘制开放折线路径并为路径赋予标签View Image nameimage value$image / VectorLabels namelabels toNameimage Label valueRoad / Label valueBoundary / /VectorLabels /Viewname是该控件的唯一标识toName指向被标注的Image标签名称。闭合多边形限制最少 3 个点、最多 20 个点并要求闭合即可得到受约束的多边形标注View Image nameimage value$image / VectorLabels namepolygons toNameimage closabletrue minPoints3 maxPoints20 Label valueBuilding / Label valuePark / /VectorLabels /View骨架模式分支路径用于树、血管、骨骼等需要分支连接的结构View Image nameimage value$image / VectorLabels nameskeleton toNameimage skeletontrue closablefalse Label valueTree / Label valueBranch / /VectorLabels /View关键点标注工具利用minPoints1与maxPoints1将路径限制为单点即可把VectorLabels当作关键点keypoint工具使用View Image nameimage value$image / VectorLabels namekeypoints toNameimage closablefalse minPoints1 maxPoints1 Label valueEye / Label valueNose / Label valueMouth / /VectorLabels /View点约束绘制配合snappixel让路径吸附到图像像素级并约束点数范围适合对精度敏感的标注场景View Image nameimage value$image / VectorLabels nameconstrained toNameimage closabletrue snappixel minPoints4 maxPoints12 Label valueRegion / /VectorLabels /View标签参数Tag parametersVectorLabels的完整参数表由文档docs/source/includes/tags/vectorlabels.md维护并与 VectorLabels.jsx 中的 props 声明一一对应参数类型默认值说明namestring—标签名称必填toNamestring—要标注的 Image 标签名称必填choicesingle|multiplesingle每块区域可选择一个还是多个标签maxUsagesnumber—每个任务中单个标签的最大使用次数showInlinebooleantrue标签是否在同一行内展示opacitynumber0.2矢量区域的透明度fillColorstring—矢量填充色十六进制strokeColorstring—描边颜色十六进制strokeWidthnumber1描边宽度pointSizesmall|medium|largemedium矢量手柄点的大小pointStylerectangle|circlerectangle点的样式snappixel|nonenone是否将矢量吸附到图像像素closablebooleanfalse是否允许闭合形状多边形curvesbooleanfalse是否允许贝塞尔曲线skeletonbooleanfalse启用骨架模式以支持分支路径minPointsnumber|nonenone允许的最少点数maxPointsnumber|nonenone允许的最多点数pointsizeenablednumber5形状被选中时点的像素大小pointsizedisablednumber5形状未被选中时点的像素大小对照源码模型VectorLabels.jsx中的ModelAttrs可以验证几个关键默认值closable、curves、skeleton均为falseminpoints/maxpoints默认null不限制pointsizeenabled默认5、pointsizeizeddisabled源码默认3文档参数表此处写为5实际渲染以源码为准opacity在VectorLabels中默认1。此外minPoints/maxPoints在VectorRegion.jsx中通过Number.parseInt解析后用于判定路径是否完成atMaxLength视图即点数达到maxPoints时路径自动视为完成。值得一提的是若不需要为矢量分配标签例如整个图像只需一种矢量标注可以使用同族的 Vector 标签它不包含Label子元素可直接绘制纯矢量路径。结果参数与导出格式ResultVectorLabels标注产生的结果在 Label Studio 数据格式中为VectorRegionResult类型的区域结果Kindglobal typedefReturnsVectorRegionResult—— 序列化后的矢量区域数据Label Studio 格式结果属性字段类型说明original_widthnumber原始图像宽度pxoriginal_heightnumber原始图像高度pximage_rotationnumber图像旋转角度degvalueObject矢量值对象value.verticesArray.Object点对象数组包含坐标、贝塞尔曲线信息与点间关系value.closedboolean矢量是否闭合true 为多边形false 为开放折线value.vectorlabelsArray.string分配给该矢量的标签名数组导出 JSON 示例以下是一个包含普通点与贝塞尔点的导出结果示例{ original_width: 1920, original_height: 1280, image_rotation: 0, value: { vertices: [ { id: point-1, x: 25.0, y: 30.0, prevPointId: null, isBezier: false }, { id: point-2, x: 75.0, y: 70.0, prevPointId: point-1, isBezier: true, controlPoint1: {x: 50.0, y: 40.0}, controlPoint2: {x: 60.0, y: 60.0} } ], closed: false, vectorlabels: [Road] } }vertices数组中的每个点包含id点唯一标识、x/y坐标、prevPointId前序点 id用于描述点的连接关系也是骨架分支结构的序列化基础、isBezier是否为贝塞尔点贝塞尔点额外携带controlPoint1与controlPoint2两个控制点坐标。closed与vectorlabels位于value顶层分别描述路径的闭合状态与所属标签。坐标系统与底层实现从 web/libs/editor/src/regions/VectorRegion.jsx 的头部注释可以了解到VectorLabels的坐标体系设计Label Studio 侧使用相对坐标百分比 0–100%用于存储与跨设备/分辨率可移植KonvaVector 侧使用图像像素坐标用于精确保编辑转换流程Label Studio (相对 %) ←→ VectorRegion ←→ KonvaVector (图像 px)区域创建后通过relativeToImageCoords()/imageToRelativeCoords()双向换算serialize()则始终以相对坐标导出到 Label Studio 格式。渲染层由web/libs/editor/src/components/KonvaVector/目录下的多个组件协作完成VectorPoints.tsx负责点的绘制与点级交互、VectorShape.tsx负责路径/多边形形状的渲染、VectorTransformer.tsx负责多选后的整体变换旋转/缩放/平移、VectorSelectionTracker.tsx负责选择跟踪。整体工具逻辑位于 web/libs/editor/src/tools/Vector.js通过Hotkey(Vectors)注册快捷键。这些实现共同支撑了上文描述的「点级编辑、路径闭合、骨架分支、贝塞尔曲线、批量变换」等完整交互能力。小结VectorLabels是 Label Studio 图像标注中最灵活的矢量工具之一基础模式绘制开放路径closabletrue生成多边形skeletontrue支持分支骨架配合minPoints/maxPoints约束点数还能充当关键点标注器。其导出结果以相对坐标保存顶点序列保证标注在不同分辨率下的可移植性。相关实现源码可继续参考 VectorLabels.jsx、VectorRegion.jsx 与 KonvaVector 组件目录文档入口位于 docs/source/tags/vectorlabels.md。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Label Studio VectorLabels 标签详解：图像矢量路径、闭合多边形与骨架标注
Label Studio VectorLabels 标签详解图像矢量路径、闭合多边形与骨架标注【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studioLabel Studio 的VectorLabels标签用于在图像上创建带标签的矢量路径vector path适用于语义分割、关键点标注、道路/边界提取等机器学习与数据科学任务。本文完整讲解该标签的交互操作加点、移动、删除、多选、闭合、骨架模式、全部配置参数及结果序列化格式并结合编辑器源码说明其坐标系统与底层实现原理。读完本文你将掌握如何通过标注配置labeling config组合VectorLabels与Label标签实现矢量路径、闭合多边形、分支骨架和单点关键点等多种标注方案。概览什么是 VectorLabelsVectorLabels是 Label Studio 中面向图像数据image的标签控件通过点击画布逐点绘制矢量路径来标注对象。与RectangleLabels、PolygonLabels等几何标注不同VectorLabels的核心能力是自由路径既可以画开放折线polyline也可以闭合为多边形polygon还能通过skeleton模式绘制带分支的骨架路径如树枝、网络图、骨骼关键点。在编辑器前端源码中该标签在 web/libs/editor/src/tags/control/VectorLabels.jsx 中注册其核心模型组合了ControlBase、LabelsModel、VectorModel、LabelMixin与SelectedModelMixin并通过Registry.addTag(vectorlabels, ...)注册为vectorlabels标签类型。它的受控目标类型被约束为Image见该文件中的Validation.controlledTags意味着它必须挂载在Image对象标签之上。基础操作路径与点的交互VectorLabels的绘制基于「点」与「路径段」两个概念。下表总结了最常用的基础交互操作说明添加点在空白处单击鼠标。在路径段上添加点按住Shift键同时点击两个点之间的路径段即可在该段上插入一个新点。结束或退出路径按Esc键或双击路径上最后添加的点。移动点单击某个点并拖动即可重新定位。删除点按住AltmacOS 为Option并点击已存在的点。注意部分高级操作要求你先完成路径再把它重新选中为区域region。最便捷的方式是在标注设置位于标注流与 Quick View 中标注界面下方中开启Select region after creating it创建后选中区域也可以先退出路径再点击路径内的某条路径段或在右侧Regions面板中点击对应区域来重新选中。被选中的路径会以红色高亮显示因此为矢量路径选择标签颜色时应避免使用红色以免与选中态混淆。源码层面VectorLabels.jsx的注释中还补充了更多精细交互Shift 拖拽可创建带控制手柄的贝塞尔点Shift 点击点可在普通点与贝塞尔点之间转换Alt 点击闭合路径的某条段可断开闭合路径见后文「闭合路径」一节。高级功能多选Multi-select开启多选后你可以批量拖动多个点进行整体位移或缩放操作说明多选路径内所有点按住Cmd或Ctrl后点击路径中的任意一个点。多选路径中的个别点先将路径选中为区域见上文提示再按住Cmd或Ctrl依次点击要选择的点。多选多条路径使用移动工具箭头框选/拖选多条路径或形状。缩放多条路径用移动工具选中多条路径后拖动选择框中的控制点进行缩放。清除选择点击任意点或按Esc键。多选后的批量变换在底层由web/libs/editor/src/components/KonvaVector/VectorTransformer.tsx实现支持对选中点集进行旋转、缩放与平移VectorRegion.jsx中的transformMode与supportsRotate/supportsScale等属性即对应这一模式。闭合路径Closed paths通过配置closabletrueVectorLabels可以创建闭合路径从而形成多边形形状操作说明闭合路径双击最后添加的点系统会自动在第一个点与最后一个点之间补上一条线段。断开闭合路径按住Alt或Option并点击闭合路径中的某条路径段即可将其重新打开再点击某个点则可删除该点。闭合语义在 web/libs/editor/src/regions/VectorRegion.jsx 中有明确实现区域模型的closed字段默认为false而closable视图会综合「区域是否已闭合」与「控件的closable参数」两个条件判断incomplete/finished状态机则依据minPoints、maxPoints与closed决定路径是否绘制完成例如 SAM2 生成的闭合轮廓即使控件closable为 false 也会被视为可闭合见该文件 L114-L148 的注释。骨架模式Skeleton配置skeletontrue可启用骨架模式用于绘制分支路径branching paths启用后新添加的点会连接到当前活动点active point而非最后一个添加的点从而允许在一条主路径上分出多条分支。这一模式适合标注树状结构Tree、网络拓扑、以及解剖学特征如骨骼关键点连线等场景。从源码看骨架逻辑位于 web/libs/editor/src/components/KonvaVector/skeleton.ts由VectorRegion.jsx中的isVectorSkeletonEnabled引入VectorLabels.jsx的模型定义中skeleton参数默认值为false。使用示例以下示例均来自 docs/source/tags/vectorlabels.md 文档可直接粘贴到 Label Studio 的标注配置中。基础矢量路径最基础的用法在图像上绘制开放折线路径并为路径赋予标签View Image nameimage value$image / VectorLabels namelabels toNameimage Label valueRoad / Label valueBoundary / /VectorLabels /Viewname是该控件的唯一标识toName指向被标注的Image标签名称。闭合多边形限制最少 3 个点、最多 20 个点并要求闭合即可得到受约束的多边形标注View Image nameimage value$image / VectorLabels namepolygons toNameimage closabletrue minPoints3 maxPoints20 Label valueBuilding / Label valuePark / /VectorLabels /View骨架模式分支路径用于树、血管、骨骼等需要分支连接的结构View Image nameimage value$image / VectorLabels nameskeleton toNameimage skeletontrue closablefalse Label valueTree / Label valueBranch / /VectorLabels /View关键点标注工具利用minPoints1与maxPoints1将路径限制为单点即可把VectorLabels当作关键点keypoint工具使用View Image nameimage value$image / VectorLabels namekeypoints toNameimage closablefalse minPoints1 maxPoints1 Label valueEye / Label valueNose / Label valueMouth / /VectorLabels /View点约束绘制配合snappixel让路径吸附到图像像素级并约束点数范围适合对精度敏感的标注场景View Image nameimage value$image / VectorLabels nameconstrained toNameimage closabletrue snappixel minPoints4 maxPoints12 Label valueRegion / /VectorLabels /View标签参数Tag parametersVectorLabels的完整参数表由文档docs/source/includes/tags/vectorlabels.md维护并与 VectorLabels.jsx 中的 props 声明一一对应参数类型默认值说明namestring—标签名称必填toNamestring—要标注的 Image 标签名称必填choicesingle|multiplesingle每块区域可选择一个还是多个标签maxUsagesnumber—每个任务中单个标签的最大使用次数showInlinebooleantrue标签是否在同一行内展示opacitynumber0.2矢量区域的透明度fillColorstring—矢量填充色十六进制strokeColorstring—描边颜色十六进制strokeWidthnumber1描边宽度pointSizesmall|medium|largemedium矢量手柄点的大小pointStylerectangle|circlerectangle点的样式snappixel|nonenone是否将矢量吸附到图像像素closablebooleanfalse是否允许闭合形状多边形curvesbooleanfalse是否允许贝塞尔曲线skeletonbooleanfalse启用骨架模式以支持分支路径minPointsnumber|nonenone允许的最少点数maxPointsnumber|nonenone允许的最多点数pointsizeenablednumber5形状被选中时点的像素大小pointsizedisablednumber5形状未被选中时点的像素大小对照源码模型VectorLabels.jsx中的ModelAttrs可以验证几个关键默认值closable、curves、skeleton均为falseminpoints/maxpoints默认null不限制pointsizeenabled默认5、pointsizeizeddisabled源码默认3文档参数表此处写为5实际渲染以源码为准opacity在VectorLabels中默认1。此外minPoints/maxPoints在VectorRegion.jsx中通过Number.parseInt解析后用于判定路径是否完成atMaxLength视图即点数达到maxPoints时路径自动视为完成。值得一提的是若不需要为矢量分配标签例如整个图像只需一种矢量标注可以使用同族的 Vector 标签它不包含Label子元素可直接绘制纯矢量路径。结果参数与导出格式ResultVectorLabels标注产生的结果在 Label Studio 数据格式中为VectorRegionResult类型的区域结果Kindglobal typedefReturnsVectorRegionResult—— 序列化后的矢量区域数据Label Studio 格式结果属性字段类型说明original_widthnumber原始图像宽度pxoriginal_heightnumber原始图像高度pximage_rotationnumber图像旋转角度degvalueObject矢量值对象value.verticesArray.Object点对象数组包含坐标、贝塞尔曲线信息与点间关系value.closedboolean矢量是否闭合true 为多边形false 为开放折线value.vectorlabelsArray.string分配给该矢量的标签名数组导出 JSON 示例以下是一个包含普通点与贝塞尔点的导出结果示例{ original_width: 1920, original_height: 1280, image_rotation: 0, value: { vertices: [ { id: point-1, x: 25.0, y: 30.0, prevPointId: null, isBezier: false }, { id: point-2, x: 75.0, y: 70.0, prevPointId: point-1, isBezier: true, controlPoint1: {x: 50.0, y: 40.0}, controlPoint2: {x: 60.0, y: 60.0} } ], closed: false, vectorlabels: [Road] } }vertices数组中的每个点包含id点唯一标识、x/y坐标、prevPointId前序点 id用于描述点的连接关系也是骨架分支结构的序列化基础、isBezier是否为贝塞尔点贝塞尔点额外携带controlPoint1与controlPoint2两个控制点坐标。closed与vectorlabels位于value顶层分别描述路径的闭合状态与所属标签。坐标系统与底层实现从 web/libs/editor/src/regions/VectorRegion.jsx 的头部注释可以了解到VectorLabels的坐标体系设计Label Studio 侧使用相对坐标百分比 0–100%用于存储与跨设备/分辨率可移植KonvaVector 侧使用图像像素坐标用于精确保编辑转换流程Label Studio (相对 %) ←→ VectorRegion ←→ KonvaVector (图像 px)区域创建后通过relativeToImageCoords()/imageToRelativeCoords()双向换算serialize()则始终以相对坐标导出到 Label Studio 格式。渲染层由web/libs/editor/src/components/KonvaVector/目录下的多个组件协作完成VectorPoints.tsx负责点的绘制与点级交互、VectorShape.tsx负责路径/多边形形状的渲染、VectorTransformer.tsx负责多选后的整体变换旋转/缩放/平移、VectorSelectionTracker.tsx负责选择跟踪。整体工具逻辑位于 web/libs/editor/src/tools/Vector.js通过Hotkey(Vectors)注册快捷键。这些实现共同支撑了上文描述的「点级编辑、路径闭合、骨架分支、贝塞尔曲线、批量变换」等完整交互能力。小结VectorLabels是 Label Studio 图像标注中最灵活的矢量工具之一基础模式绘制开放路径closabletrue生成多边形skeletontrue支持分支骨架配合minPoints/maxPoints约束点数还能充当关键点标注器。其导出结果以相对坐标保存顶点序列保证标注在不同分辨率下的可移植性。相关实现源码可继续参考 VectorLabels.jsx、VectorRegion.jsx 与 KonvaVector 组件目录文档入口位于 docs/source/tags/vectorlabels.md。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
