Polyline Annotations

Polyline annotations are similar to line 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. 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.

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

Element name: polyline

<polyline page="0" rect="245.230,604.240,350.360,666.640" color="#E44234" flags="print" name="8e0f908d-1377-d579-034d-e29df522af7f" title="Guest" subject="Polyline" date="D:20220627155849-07'00'" creationdate="D:20220627155845-07'00'" head="None" tail="None">
  <vertices>246.23,605.24;263.88,655.41;317.77,605.24;349.36,665.64</vertices>
</polyline>

For the full list of properties, please visit the annotation's API docs.

When initializing the polyline annotation, you should use the addPathPoint API to add points the annotation path.

To read the path or points of the polyline annotation, you can use getPath to get an array of points.

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

If you know which point of the annotation path you would like to get, you can use getPathPoint with the point index to retrieve the point.

Setting the path points on the polyline annotation can be done through setPathPoint.

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

If you need to know the line ending style of the starting point, the getStartStyle API will return the string value representing the style. Check out LineEndType to see the possible values.

To set the style of the starting point of a line, the 'setStartStyle' API will change it to the specified style. It is recommended to use the LineEndType constant to get the value.

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

If you need to know the line ending style of the ending point, the getEndStyle API will return the string value representing the style. Check out LineEndType to see the possible values.

To set the style of the ending point of a line, the 'setEndStyle' API will change it to the specified style. It is recommended to use the LineEndType constant to get the value.

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

The line annotation ending styles can be set with the values provided by the 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.