Separate opacity for fill and stroke

When creating an Annotation with WebViewer, you may want to set different opacity values for the fill and stroke. For example having the fill semi-transparent and the stroke completely opaque.

Unfortunately the PDF specification doesn't allow for separate alpha values for the stroke and fill color. Instead it provides an opacity value that applies to the entire annotation. With that said, it is possible to customize this so that the stroke and fill colors have different opacity values when the annotation is viewed in WebViewer. (Note: this solution won't work in any other PDF viewers if we download the file).

To achieve this, we could do it is using the setCustomData API on the annotation. For example:

JavaScript

myAnnot.setCustomData('fillOpacity', '0.5');
myAnnot.FillColor.A = 0.5;

Then when we reload the PDF we can listen to annotationChanged and update the opacity based on the fill opacity custom data. For example:

JavaScript (SDK v8.0+)

annotManager.addEventListener('annotationChanged', (annotations, action) => {
  if (action === 'add') {
    annotations.forEach(annotation => {
      const fillOpacity = annotation.getCustomData('fillOpacity');
      if (fillOpacity) {
        annotation.FillColor.A = parseInt(fillOpacity, 10);
      }
    });
  }
});

JavaScript (SDK v6.0+)

annotManager.on('annotationChanged', (annotations, action) => {
  if (action === 'add') {
    annotations.forEach(annotation => {
      const fillOpacity = annotation.getCustomData('fillOpacity');
      if (fillOpacity) {
        annotation.FillColor.A = parseInt(fillOpacity, 10);
      }
    });
  }
});