To replace Count tool icon by custom icon [Pdfjs-express 7.0]

Technical Support
2

Hi there!

The PDF spec defines what icons a sticky annotation can have (the count annotation is just an extension of the sticky annotation), so changing the appearance to something custom would cause the annotation to render incorrectly once its saved and reloaded in a different viewer.

I recommend going through all the possible supported icons and seeing if there is something you like. You can change the icon by setting the Icon property on the annotation.

Webviewer({
  path: '/lib',
  enableMeasurement: true
}, document.getElementById('viewer')).then(instance => {
  const { Annotations, annotManager } = instance;
  annotManager.on('annotationChanged', ([annot], action) => {
    if (
      action === 'add' &&
      annot instanceof Annotations.StickyAnnotation &&
      !!annot.getCustomData('trn-is-count')
    ) {
      annot.Icon = 'Cross' // change the icon here
    }
  })
});

The list of supported PDF icons are as follows:

Insert
Circle
NewParagraph
Help
Key
Check
Checkmark
Cross
CrossHairs
Paragraph
RightArrow
RightPointer
Star
UpArrow
UpLeftArrow

If you are okay with going against the PDF spec, you can overwrite the draw function on the sticky annotation class like so:

Webviewer({
  path: '/lib',
  enableMeasurement: true
}, document.getElementById('viewer')).then(instance => {
  const { Annotations } = instance;

  const oldDraw = Annotations.StickyAnnotation.prototype.draw;
  Annotations.StickyAnnotation.prototype.draw = function(ctx, pageMatrix) {
    if (this.getCustomData('trn-is-count')) {
      // add your custom draw code here using the canvas context (ctx)
    } else {
      oldDraw.call(this, ctx, pageMatrix);
    }
  }
});

I hope this helps!

Thanks,
Logan