Strikeout Annotations

Strikeout annotations are annotations that draw a strikeout line through text.

Text strikeout annotations use the stroke color as the strikeout color. Setting a fill color will have no visual impact on the annotation by default.

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

    let debounce = null;

    // Automatically create strikeout annotations on text selection
    documentViewer.addEventListener('textSelected', (quads, text, pageNumber) => {
      // Add some debouncing to prevent constant triggering during selection
      if (debounce) {
        clearTimeout(debounce);
      }
      debounce = setTimeout(() => {
        // Create annotation with object initializer
        const annot = new Annotations.TextStrikeoutAnnotation({
          PageNumber: pageNumber,
          Quads: quads,
          StrokeColor: new Annotations.Color(0, 0, 255, 1),
          StrokeThickness: 3,
        });

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

        debounce = null;
      }, 1000);
    });
  });

Element name: strikeout

<strikeout page="1" rect="36,677.030,265.128,704.526" color="#E44234" flags="print" name="5e9acb3f-e851-416d-35a1-66f5601550c3" title="Guest" subject="Strikeout" date="D:20220517174415-07'00'" creationdate="D:20220517174414-07'00'" coords="36,704.526105859375,265.12800000000016,704.526105859375,36,693.02635,265.12800000000016,693.02635,36,688.530105859375,96.60000000000001,688.530105859375,36,677.03035,96.60000000000001,677.03035">
  <trn-custom-data bytes="{"trn-annot-preview":"You plan to embed PDF functionality into an\napplication."}"/>
</strikeout>

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

Although it is possible to get the quads using the Quads property, there is also a getQuads method on the annotation to get its quads.

console.log(strikeout.getQuads());
[
   { // First quad of the first line
      "x1":58.24,
      "y1":98.97,
      "x2":265.13,
      "y2":98.97,
      "x3":265.13,
      "y3":87.47,
      "x4":58.25,
      "y4":87.47
   },
   ... // Second quad of the second line and so on
]

Using the setQuads API can be used to set the quads for the annotation as well.

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

    annotationManager.addEventListener('annotationChanged', (annotations, action) => {
      if (annotations.length > 0 && action === 'add') {
        annotations.forEach(annot => {
          if (annot instanceof Annotations.TextStrikeoutAnnotation) {
            const quads = annot.getQuads();
            quads.forEach(quad => {
              quad.x1 = Math.round(quad.x1 * 100) / 100;
              quad.y1 = Math.round(quad.y1 * 100) / 100;
            });
            annot.setQuads(quads);
          }
        });
      }
    });
  });