Line Annotations

Line annotations are lines with two specific points: start and end. Arrow annotations and measurement lines are all actually just line annotations. They are created using different line endings and captions available on the line annotation already.

Line annotations 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. Lines can also have line ending styles set on either end of the line. The line endings are also affected by the currently styles on the line.

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

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annot = new Annotations.LineAnnotation({
        PageNumber: 1,
        Start: new Annotations.Point(50, 50),
        End: new Annotations.Point(100, 100),
        StrokeColor: new Annotations.Color(0, 255, 0, 1),
      });

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

Element name: line

<line page="0" rect="252.430,620.280,347.070,645.440" color="#E44234" flags="print" name="3c0708a6-b0ac-c154-3637-3056384811ae" title="Guest" subject="Line" date="D:20220620170239-07'00'" creationdate="D:20220620170238-07'00'" start="253.43,644.44" end="346.07,621.28"/>

Gets or sets the start point of the line.

Gets or sets the end point of the line.

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

Gets or sets the caption on the line

Gets or sets the caption position style. This can either be Top or Inline

Gets or sets the horizontal offset of the caption from the line

Gets or sets the vertical offset of the caption from the line

Gets or sets the length of the leader lines. Values above/below 0 will render the lines

You may be interested in the length of a line for positioning or precision. Line annotations provide a getLineLength API to return that length.

To adjust a line, you could change the Start and End points but if you need a specific length, you should use setLineLength to adjust the length. Changing the length will only move the End point.

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

    annotationManager.addEventListener('annotationChanged', (annotations, action) => {
      if (action === 'add') {
        annotations.forEach(annot => {
          if (annot instanceof Annotations.LineAnnotation) {
            if (annot.X < 800 && annot.Y < 540) {
              annot.setLineLength(annot.getLineLength() / 3);
            }
          }
        });
      }
    });
  });

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.LineAnnotation) {
            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.LineAnnotation) {
            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.