Vector - Beta 🧪

The Vector tag is used to add vectors to an image without selecting a label. This can be useful when you have only one label to assign to the vector.

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.

Tag parameters

Parameters

Param	Type	Default	Description
name	string		Name of tag
toname	string		Name of image to label
[opacity]	number	0.6	Opacity of vector
[fillColor]	string	"transparent"	Vector fill color in hexadecimal or HTML color name
[strokeColor]	string	"#f48a42"	Stroke color in hexadecimal
[strokeWidth]	number	3	Width of stroke
[pointSize]	small | medium | large	small	Size of vector handle points
[pointStyle]	rectangle | circle	circle	Style of points
[smart]	boolean		Show smart tool for interactive pre-annotations
[smartOnly]	boolean		Only show smart tool for interactive pre-annotations
[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	3	Size of a point in pixels when shape is not selected

Example

Basic labeling configuration for vector image segmentation

<View>
    <Vector name="line-1" toName="img-1" />
    <Image name="img-1" value="$img" />
</View>

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)

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
  }
}