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

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

Element name: ink

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

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

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

Gets the current sweep angle in degrees.

Gets the current radius.

Gets the current length.

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

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

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.

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

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.

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.

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