Some test text!

menu
Separate opacity for fill and strokekeyboard_arrow_down

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:

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:

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

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.