Customizing default annotation styles

An annotation's default style is often governed by a tool associated with it. For example, a tool will set stroke color, stroke thickness, fill color, text color, font size and opacity of the annotation, which becomes their 'default' style. To change these properties, you can use the setStyles function on the tool objects.

You can add the customization code them in your app:

var viewer = new PDFTron.WebViewer({ ... }, viewerElement);

viewerElement.addEventListener('ready', function() {
  var docViewer = viewer.getInstance().docViewer;
  var Annotations = document.querySelector('iframe').contentWindow.Annotations;

  docViewer.getTool('AnnotationCreateTextHighlight').setStyles(function(currentStyle) {
    return {
      StrokeColor: new Annotations.Color(0, 221, 255)
    };
  });

  docViewer.getTool('AnnotationCreateFreetext').setStyles(function(currentStyle) {
    return {
      StrokeThickness: 5,
      StrokeColor: new Annotations.Color(0, 0, 255),
      TextColor: new Annotations.Color(0, 0, 0),
      FontSize: '20pt'
    };
  });
});

or in a config file:

$(document).on('viewerLoaded', function() {
  var docViewer = readerControl.docViewer;

  docViewer.getTool('AnnotationCreateTextHighlight').setStyles(function(currentStyle) {
    return {
      StrokeColor: new Annotations.Color(0, 221, 255)
    };
  });

  docViewer.getTool('AnnotationCreateFreetext').setStyles(function(currentStyle) {
    return {
      StrokeThickness: 5,
      StrokeColor: new Annotations.Color(0, 0, 255),
      TextColor: new Annotations.Color(0, 0, 0),
      FontSize: '20pt'
    };
  });
});