Section:

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

1myAnnot.setCustomData('fillOpacity', '0.5');
2myAnnot.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:

1annotManager.addEventListener('annotationChanged', (annotations, action) => {
2  if (action === 'add') {
3    annotations.forEach(annotation => {
4      const fillOpacity = annotation.getCustomData('fillOpacity');
5      if (fillOpacity) {
6        annotation.FillColor.A = parseInt(fillOpacity, 10);
7      }
8    });
9  }
10});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales