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.

Instantiation

JavaScript (SDK v8.0+)

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

AnnotationManager#annotationsLoaded PolygonAnnotation PolygonAnnotation.addPathPoint Color AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.on('annotationsLoaded', () => {
      const annot = new Annotations.PolygonAnnotation();
      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);
      annot.addPathPoint(50, 50);

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

AnnotationManager#annotationsLoaded PolygonAnnotation PolygonAnnotation.addPathPoint Color AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

XFDF

Element name: polygon

Shell

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

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.

ArcDrawMode

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

This property can be set using the ArcDrawModes constant on the PolygonCloudCreateTool. e.g. Tools.PolygonCloudCreateTool.ArcDrawModes.EQUAL_ARCS

StrokeColor

Gets or sets the color of the annotation's stroke.

FillColor

Gets or sets the color of the annotation's interior.

Style

Gets or sets the border style of an annotation. Possible styles include:

• solid
• dash
• cloudy

StrokeThickness

Gets or sets the width of the annotation's stroke outline.

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 API.

Intensity

Describes intensity of cloudy style effect. Use 0 for no effect.

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

getPath

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

JavaScript (SDK v8.0+)

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

PolygonAnnotation.getPath

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.addEventListener('annotationsLoaded', () => {
      const annotList = annotManager.getAnnotationsList();
      annotList.forEach(annot => {
        if (annot instanceof Annotations.PolygonAnnotation) {
          const points = annot.getPath();
          points.forEach(point => {
            // Work with points
          });
        }
      });
    });
  });

PolygonAnnotation.getPath

getPathPoint

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.

setPathPoint

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.

JavaScript (SDK v8.0+)

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

PolygonAnnotation.setPathPoint

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

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

PolygonAnnotation.setPathPoint