Polygon Annotations

Polygon annotations are annotations users can draw with multiple points. This can be used to draw any closed shape with lines around content. When initialized, polygons start with no points so they will have to be manually added. The last point in a polygon annotation's path must be the same as the first point to close it out.

Polygon annotations can have both a fill and stroke color. The stroke or border style can also be changed to between a solid, dashed, or cloudy style. The cloud polygon is actually just a polygon annotation with the cloudy style.

While creating the polygon 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.PolygonAnnotation({
        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);
      annot.addPathPoint(50, 50);

      annotationManager.addAnnotation(annot);
      annotationManager.redrawAnnotation(annot);
    });
  });

Element name: polygon

<polygon page="0" rect="49,691,151,743" color="#00FF00" flags="print" name="8830cdbe-3ce0-6365-d549-5c8c49b1f304" subject="Polygon" date="D:20220605160946-07'00'" creationdate="D:20220605160946-07'00'">
  <vertices>50,742;75,692;100,742;125,692;150,742;50,742</vertices>
</polygon>

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

Describes how the arcs of a PolygonCloud annotation will be drawn, can be one of either RANDOM_ARCS or EQUAL_ARCS.

When initializing the polygon annotation, you should use the addPathPoint API to add points the annotation path. The last point should be the same as the first to close out the path.

To read the path or points of the polygon 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.PolygonAnnotation) {
          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 polygon annotation can be done through setPathPoint. This can be used to initialize the points of the annotation if that was not done at the start.

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annotList = annotationManager.getAnnotationsList();
      annotList.forEach(annot => {
        if (annot instanceof Annotations.PolygonAnnotation) {
          annot.setPathPoint(0, 50, 100);
          annot.setPathPoint(1, 250, 150);
        }
      });
    });
  });