Work with Arc Annotations in WebViewer

Arcs are not officially part of the PDF specification, but can be created through WebViewer and viewed in other viewers as free hand annotations.

Arc annotations render arcs on a document utilizing three path points: a start, middle and end. The middle point helps define the curve as arcs are drawn from each end towards the middle point.

Arc annotations can only use the stroke color. Border styles are not supported but the stroke thickness can be adjusted.

Instantiation

JavaScript

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

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annot = new Annotations.ArcAnnotation({
        PageNumber: 1,
        StrokeColor: new Annotations.Color(0, 255, 0, 1),
        Path: [
          [50, 50],
          [75, 100],
          [100, 50],
        ],
      });

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

AnnotationManager#annotationsLoaded ArcAnnotation Color AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

This annotation type is only supported in WebViewer 8.4+.

XFDF

Element name: ink

Shell

<ink page="0" rect="226.780,596.125,364.890,665.055" color="#E44234" flags="print" name="a1d4e396-d1ed-d902-fbc6-29b964a25379" title="Guest" subject="Arc" date="D:20220804181807-07'00'" creationdate="D:20220804181225-07'00'">
    <appearance xmlns="http://www.w3.org/1999/xhtml">...</appearance>
    <inklist>
        <gesture>227.78000007288267,650.3300000159206;229.58678742495061,643.6739652018553;232.04904306283828,637.2315605921359;235.1421649421254,631.0671565640471;238.83524761144423,625.2423458049562;243.09139100953377,619.8153278985419;247.86806915845432,614.8403278137914;253.11755506910168,610.3670541070351;258.7873976135061,606.4402022504831;264.8209455991645,603.0990080498417;271.15791380903005,600.3768556131115;277.734985351473,598.3009437876165;284.486444301732,596.8920143981117;291.3448323137117,596.1641450013269;298.2416226414781,596.1246082276734;305.1079048358519,596.7737991155241;311.87507327483803,598.1052311641217;318.47551264832265,600.1056011445496;324.84327354790105,602.7549220211977;330.9147314115666,606.0267226556155;336.6292222393026,609.8883122973775;341.9296487277179,614.3011072192551;346.7630507674283,619.2210162330648;351.0811346029633,624.5988812342464;354.84075536800697,630.3809683733939;358.0043481746404,636.5095049471169;360.54030344928447,642.9232566437955;362.4232827651103,649.558139376581;363.63447201522433,656.347859590408;363.89,658.67</gesture>
        <gesture>227.78,650.33;295.18826568609194,665.0547970582759</gesture>
        <gesture>295.18826568609194,665.0547970582759;363.89,658.67</gesture>
    </inklist>
    <vertices>227.78,650.33;340.28,612.83;363.89,658.67</vertices>
</ink>

Required properties

PageNumber

Gets or sets the page number of a document that the annotation appears on.

Path

Gets or sets the 3 points defining the arc. The input must be a set of x/y coordinates in the following format: [[x,y],[x,y],[x,y]].

Notable properties

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

StrokeColor

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

StrokeThickness

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

Angle

Gets the current sweep angle in degrees.

Radius

Gets the current radius.

Length

Gets the current length.

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

getPath

To get the points that are used to create the arc, you can use getPath to get an array of three points.

JavaScript

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

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

ArcAnnotation.getPath

addPathPoint

When initializing an arc annotation, you can use the addPathPoint API to add points the annotation path. The arc annotation will only use the first three points.

JavaScript

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

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annot = new Annotations.ArcAnnotation({
        PageNumber: 1,
        StrokeColor: new Annotations.Color(0, 255, 0, 1),
      });

      annot.addPathPoint(50, 50, 0);
      annot.addPathPoint(75, 100, 0);
      annot.addPathPoint(100, 50, 0);

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

ArcAnnotation.addPathPoint

getPathPoint

If you know which point on 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 free hand annotation can be done through the setPathPoint. This can be used to initialize the points of the annotation if that was not done at the start. Since free hand annotations contain multiple paths, a path index can be provided. If one was not provided, the first path will be used by default.

JavaScript

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

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

ArcAnnotation.setPathPoint