VectorLabels - Beta 🧪

The VectorLabels tag is used to create labeled vectors.

Use with the following data types: image.

Path and point basics

Action	Instruction
Add points	Click on empty space.
Add points to path segments	Press Shift while clicking on a segment that is between two points.
End or exit the path	Press Esc or click on the last point you added to the path.
Move points	If you are actively creating the path, simply backtrack and click a point and drag to reposition. If you have already exited the path, first select it again and then click an existing point to drag.
Delete points	Press Alt or Option and click on an existing point.

Advanced

Multi-select

With multi-select, you can drag multiple points to reposition or rotate them.

Action	Instruction
Select multiple points	To select all points in the path, press Cmd or Ctrl and then click any point in the path. To select individual points in a path, first select the path as a region (see the note above). Then press Cmd or Ctrl as you click points.
Transform selection	Use transformer handles for rotation, scaling, and translation
Clear selection	Click on any point or press Esc.

Bézier curves

To use Bezier curves, you must enable them using the curves="true" parameter in your labeling configuration. Control points are shown when editing bezier points.

Action	Instruction
Create a curve	As you click to add a point, hold while dragging your cursor.
Create a new curve point	Press Shift while dragging a control point.
Adjust a curve	First exit the path and then re-select it as a region. Then you can click and drag control points.
Convert a point to a curve	Press Shift and click the point once.
Asymmetric curves	By default, the control points move in sync. To create asymmetric curves (only move one control point), press Alt or Option before clicking the control point.

Closed paths

You can create closed paths to create polygon shapes. To create closed paths, use the closable="true" parameter in your labeling configuration.

Action	Instruction
Break closed path	Press Alt or Option and click on a segment in a closed path to reopen it.

Skeleton

You can create skeleton vectors using the skeleton="true" parameter in your labeling configuration.

When enabled, new points connect to the active point and not the last added point.

Usage examples

Basic vector path

<View>
 <Image name="image" value="$image" />
 <VectorLabels name="labels" toName="image">
   <Label value="Road" />
   <Label value="Boundary" />
 </VectorLabels>
</View>

Polygon with Bezier support

<View>
 <Image name="image" value="$image" />
 <VectorLabels
   name="polygons"
   toName="image"
   closable="true"
   curves="true"
   minPoints="3"
   maxPoints="20"
 >
   <Label value="Building" />
   <Label value="Park" />
 </VectorLabels>
</View>

Skeleton mode for branching paths

<View>
 <Image name="image" value="$image" />
 <VectorLabels
   name="skeleton"
   toName="image"
   skeleton="true"
   closable="false"
   curves="true"
 >
   <Label value="Tree" />
   <Label value="Branch" />
 </VectorLabels>
</View>

Keypoint annotation tool

<View>
 <Image name="image" value="$image" />
 <VectorLabels
   name="keypoints"
   toName="image"
   closable="false"
   curves="false"
   minPoints="1"
   maxPoints="1"
 >
   <Label value="Eye" />
   <Label value="Nose" />
   <Label value="Mouth" />
 </VectorLabels>
</View>

Constrained drawing

<View>
 <Image name="image" value="$image" />
 <VectorLabels
   name="constrained"
   toName="image"
   closable="true"
   curves="true"
   constraintoBounds="true"
   snap="pixel"
   minPoints="4"
   maxPoints="12"
 >
   <Label value="Region" />
 </VectorLabels>
</View>

Tag parameters

Parameters

Param	Type	Default	Description
name	string		Name of tag
toName	string		Name of image to label
[choice]	single | multiple	single	Configure whether you can select one or multiple labels
[maxUsages]	number		Maximum number of times a label can be used per task
[showInline]	boolean	true	Show labels in the same visual line
[opacity]	number	0.2	Opacity of vector
[fillColor]	string		Vector fill color in hexadecimal
[strokeColor]	string		Stroke color in hexadecimal
[strokeWidth]	number	1	Width of stroke
[pointSize]	small | medium | large	medium	Size of vector handle points
[pointStyle]	rectangle | circle	rectangle	Style of points
[snap]	pixel | none	none	Snap vector to image pixels
[closable]	boolean	false	Allow closed shapes
[curves]	boolean	false	Allow Bezier curves
[skeleton]	boolean	false	Enables skeleton mode to allow branch paths
[minPoints]	number | none	none	Minimum allowed number of points
[maxPoints]	number | none	none	Maximum allowed number of points
[constrainToBounds]	boolean	false	Whether to keep shapes inside image bounds
[pointsizeenabled]	number	5	Size of a point in pixels when shape is selected
[pointsizedisabled]	number	5	Size of a point in pixels when shape is not selected

Result parameters

Kind: global typedef
Returns: VectorRegionResult - The serialized vector region data in Label Studio format
Properties

Name	Type	Description
original_width	number	width of the original image (px)
original_height	number	height of the original image (px)
image_rotation	number	rotation degree of the image (deg)
value	Object
value.vertices	Array.<Object>	array of point objects with coordinates, bezier curve information, and point relationships
value.closed	boolean	whether the vector is closed (polygon) or open (polyline)
value.vectorlabels	Array.<string>	array of label names assigned to this vector

Example results JSON export

{
  "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"]
  }
}