Environment:
-
Apryse WebViewer (JavaScript/TypeScript)
-
Version:
@pdftron/webviewer^11.x
Problem:
We use RectangleAnnotation to highlight geo-tagged bounding box regions on a PDF page. Each annotation is created with Opacity = 0.5. When multiple bounding boxes overlap spatially on the same page, the overlapping regions visually darken progressively — more overlaps = darker — eventually making the underlying PDF text completely invisible.
Steps to Reproduce:
-
Initialize WebViewer and load any PDF document.
-
Programmatically create two
Annotations.RectangleAnnotationobjects. -
Position them so that they partially overlap each other.
-
Set the
Opacityfor both annotations to0.5(or any value below 1.0). -
Set a
FillColor(e.g., Yellow) for both. -
Add both to the
AnnotationManagerand calldrawAnnotations(). -
Observed Result: The area where the two rectangles overlap is significantly darker than the non-overlapping areas, and the text underneath becomes hard to read.
Question:
We need to stick with RectangleAnnotation due to the geo-tagged coordinate data we receive. What is the correct WebViewer JS API or configuration to render multiple overlapping RectangleAnnotation objects with a uniform flat opacity, so the overlap area looks identical to non-overlapping areas (i.e. no opacity compounding between annotations)?