> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/annotation/annotation-types/polylineannotation.md).
# Polyline Annotations
Enhance document collaboration with Polyline Annotations. Draw multiple connected lines with start and ending styles on your documents. Explore stroke colors, border styles, and more for precise annot
Polyline annotations are similar to [line](/web/annotation/annotation-types/lineannotation.md) annotations except users can draw multiple, connected lines on their documents. Unlike working with line annotations, where you only have a start and end, you will be working with a path of points.
Polyline annotations can have a start and ending [style](https://sdk.apryse.com/api/web/Core.Annotations.html#.LineEndType). They primarily use a stroke color but could have a fill color that only affects closed line ending styles. The stroke or border style can also be changed between a solid or dashed style, which will also affect line endings.
While creating the polyline create tool, double-clicking will automatically close the path.
## Instantiation
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, annotationManager, Annotations } = instance.Core;
documentViewer.addEventListener('annotationsLoaded', () => {
const annot = new Annotations.PolylineAnnotation({
PageNumber: 1,
StrokeColor: new Annotations.Color(0, 255, 0, 1),
});
annot.addPathPoint(50, 50);
annot.addPathPoint(75, 100);
annot.addPathPoint(100, 50);
annot.addPathPoint(125, 100);
annot.addPathPoint(150, 50);
annotationManager.addAnnotation(annot);
annotationManager.redrawAnnotation(annot);
});
});
```
{% endcode %}
[AnnotationManager#annotationsLoaded](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#event:annotationsLoaded) [PolylineAnnotation](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html) [PolylineAnnotation.addPathPoint](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#addPathPoint) [Color](https://sdk.apryse.com/api/web/Core.Annotations.Color.html) [AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation)
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { docViewer, annotManager, Annotations } = instance;
docViewer.on('annotationsLoaded', () => {
const annot = new Annotations.PolylineAnnotation();
annot.PageNumber = 1;
annot.StrokeColor = new Annotations.Color(0, 255, 0, 1);
annot.addPathPoint(50, 50);
annot.addPathPoint(75, 100);
annot.addPathPoint(100, 50);
annot.addPathPoint(125, 100);
annot.addPathPoint(150, 50);
annotManager.addAnnotation(annot);
annotManager.redrawAnnotation(annot);
});
});
```
{% endcode %}
[AnnotationManager#annotationsLoaded](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#event:annotationsLoaded) [PolylineAnnotation](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html) [PolylineAnnotation.addPathPoint](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#addPathPoint) [Color](https://sdk.apryse.com/api/web/Core.Annotations.Color.html) [AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation)
{% endtab %}
{% endtabs %}
## XFDF
Element name: `polyline`
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
246.23,605.24;263.88,655.41;317.77,605.24;349.36,665.64
```
{% endcode %}
{% endtab %}
{% endtabs %}
## Required properties
### PageNumber
Gets or sets the page number of a document that the annotation appears on.
## Notable properties
For the full list of properties, please visit the annotation's [API docs](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html).
### StrokeColor
Gets or sets the color of the annotation's stroke.
### Style
Gets or sets the border style of an annotation. Possible styles include:
* solid
* dash
### Dashes
Gets or sets the border dash style of an annotation. This expects a string representing the length of dashes and spacing inbetween, delimited by commas (ex. `3, 3`). You can specify any amount of lengths but, an odd number of values will be made even by cloning it as a second set. To understand further, you can read more about the [`setLineDash`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash/) API.
### StrokeThickness
Gets or sets the width of the annotation's stroke outline.
### Author
The author of the annotation.
### Color
Gets or sets the annotation's stroke color.
### Hidden
Gets or sets whether the annotation is hidden.
### Invisible
Gets or sets whether the annotation is invisible, only if it is an unknown annotation type. Generally for hiding annotations you should use "Hidden".
### IsClickableOutsideRect
Gets or sets whether any parts of the annotation drawn outside of the rect are clickable.
### Listable
Gets or sets whether the annotation should be listed in annotation lists. If set to false, the annotation will also become unselectable.
### Locked
Gets or sets whether the annotation is locked or not. If it's locked it can't be edited or deleted, but the note can be edited.
### LockedContents
Gets or sets whether the annotation contents are locked or not. If the contents are locked then note can't be edited but the annotation can be edited or deleted.
### NoDelete
Gets or sets if this annotation can be deleted.
### NoMove
Gets or sets whether or not the annotation can be moved.
### NoResize
Gets or sets if this annotation can be resized by the user.
### NoRotate
Gets or sets if this annotation can be rotated.
### NoView
Gets or sets whether the annotation is visible on the screen. Differs from Hidden in that it can still be printed if the print flag is set.
### NoZoom
Gets or sets if this annotation scales with the page.
### Printable
Gets or sets whether the annotation should be displayed when printing the page.
### ReadOnly
Gets or sets whether the annotation is readonly or not. If it's readonly both the annotation itself and its note can't be edited or deleted.
### ToggleNoView
Gets or sets whether the ToggleNoView flag is set on the annotation.
## Useful methods
### addPathPoint
When initializing the polyline annotation, you should use the [`addPathPoint`](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#addPathPoint) API to add points the annotation path.
### getPath
To read the path or points of the polyline annotation, you can use [`getPath`](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#getPath) to get an array of points.
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, annotationManager, Annotations } = instance.Core;
documentViewer.addEventListener('annotationsLoaded', () => {
const annotList = annotationManager.getAnnotationsList();
annotList.forEach(annot => {
if (annot instanceof Annotations.PolylineAnnotation) {
const points = annot.getPath();
points.forEach(point => {
// Work with points
});
}
});
});
});
```
{% endcode %}
[PolylineAnnotation.getPath](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#getPath)
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { docViewer, annotManager, Annotations } = instance;
docViewer.addEventListener('annotationsLoaded', () => {
const annotList = annotManager.getAnnotationsList();
annotList.forEach(annot => {
if (annot instanceof Annotations.PolylineAnnotation) {
const points = annot.getPath();
points.forEach(point => {
// Work with points
});
}
});
});
});
```
{% endcode %}
[PolylineAnnotation.getPath](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#getPath)
{% endtab %}
{% endtabs %}
### getPathPoint
If you know which point of the annotation path you would like to get, you can use [`getPathPoint`](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#getPathPoint) with the point index to retrieve the point.
### setPathPoint
Setting the path points on the polyline annotation can be done through [`setPathPoint`](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#setPathPoint).
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, annotationManager, Annotations } = instance.Core;
documentViewer.addEventListener('annotationsLoaded', () => {
const annotList = annotationManager.getAnnotationsList();
annotList.forEach(annot => {
if (annot instanceof Annotations.PolylineAnnotation) {
annot.setPathPoint(0, 50, 100);
annot.setPathPoint(1, 250, 150);
}
});
});
});
```
{% endcode %}
[PolylineAnnotation.setPathPoint](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#setPathPoint)
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { docViewer, annotManager, Annotations } = instance;
docViewer.addEventListener('annotationsLoaded', () => {
const annotList = annotManager.getAnnotationsList();
annotList.forEach(annot => {
if (annot instanceof Annotations.PolylineAnnotation) {
annot.setPathPoint(0, 50, 100);
annot.setPathPoint(1, 250, 150);
}
});
});
});
```
{% endcode %}
[PolylineAnnotation.setPathPoint](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#setPathPoint)
{% endtab %}
{% endtabs %}
### getStartStyle
If you need to know the line ending style of the starting point, the [`getStartStyle`](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#getStartStyle) API will return the string value representing the style. Check out [`LineEndType`](https://sdk.apryse.com/api/web/Core.Annotations.html#.LineEndType) to see the possible values.
### setStartStyle
To set the style of the starting point of a line, the ['setStartStyle'](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#setStartStyle) API will change it to the specified style. It is recommended to use the [`LineEndType`](https://sdk.apryse.com/api/web/Core.Annotations.html#.LineEndType) constant to get the value.
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { annotationManager, Annotations } = instance.Core;
annotationManager.addEventListener('annotationChanged', (annotations, action) => {
if (action === 'add') {
annotations.forEach(annot => {
if (annot instanceof Annotations.PolylineAnnotation) {
annot.setStartStyle(Annotations.LineEndType.OPEN_ARROW);
}
});
}
});
});
```
{% endcode %}
[PolylineAnnotation.setStartStyle](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#setStartStyle) [LineEndType](https://sdk.apryse.com/api/web/Core.Annotations.html#.LineEndType)
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { annotManager, Annotations } = instance.Core;
annotManager.on('annotationChanged', (annotations, action) => {
if (action === 'add') {
annotations.forEach(annot => {
if (annot instanceof Annotations.PolylineAnnotation) {
annot.setStartStyle(Annotations.LineEndType.OPEN_ARROW);
}
});
}
});
});
```
{% endcode %}
[PolylineAnnotation.setStartStyle](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#setStartStyle) [LineEndType](https://sdk.apryse.com/api/web/Core.Annotations.html#.LineEndType)
{% endtab %}
{% endtabs %}
### getEndStyle
If you need to know the line ending style of the ending point, the [`getEndStyle`](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#getEndStyle) API will return the string value representing the style. Check out [`LineEndType`](https://sdk.apryse.com/api/web/Core.Annotations.html#.LineEndType) to see the possible values.
### setEndStyle
To set the style of the ending point of a line, the ['setEndStyle'](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#setEndStyle) API will change it to the specified style. It is recommended to use the [`LineEndType`](https://sdk.apryse.com/api/web/Core.Annotations.html#.LineEndType) constant to get the value.
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { annotationManager, Annotations } = instance.Core;
annotationManager.addEventListener('annotationChanged', (annotations, action) => {
if (action === 'add') {
annotations.forEach(annot => {
if (annot instanceof Annotations.PolylineAnnotation) {
annot.setEndStyle(Annotations.LineEndType.OPEN_ARROW);
}
});
}
});
});
```
{% endcode %}
[PolylineAnnotation.setEndStyle](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#setEndStyle)
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { annotManager, Annotations } = instance.Core;
annotManager.on('annotationChanged', (annotations, action) => {
if (action === 'add') {
annotations.forEach(annot => {
if (annot instanceof Annotations.PolylineAnnotation) {
annot.setEndStyle(Annotations.LineEndType.OPEN_ARROW);
}
});
}
});
});
```
{% endcode %}
[PolylineAnnotation.setEndStyle](https://sdk.apryse.com/api/web/Core.Annotations.PolylineAnnotation.html#setEndStyle)
{% endtab %}
{% endtabs %}
## Other notes
### LineEndType
The line annotation ending styles can be set with the values provided by the [`LineEndType`](https://sdk.apryse.com/api/web/Core.Annotations.html#.LineEndType) constant or strings. The string values of the line ending styles supported by the specification are:
* None - No line ending. This is default.
* OpenArrow - An open-ended arrow.
* ROpenArrow - A reversed, open-ended arrow.
* ClosedArrow - A closed arrow. This is affected by `FillColor`.
* RClosedArrow - A reversed, closed arrow. This is affected by `FillColor`.
* Butt - A perpendicular straight line.
* Square - A square. This is affected by `FillColor`.
* Diamond - A diamond or square rotated 90 degrees. This is affected by `FillColor`.
* Circle - A circle. This is affected by `FillColor`.
* Slash - A line going from right to left.
`StrokeThickness` also affects the size of the line endings.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.apryse.com/web/annotation/annotation-types/polylineannotation.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.