How to set FillColor and StrokeColor of TextHighlightAnnotation

Technical Support
1

Which product are you using?
PDF.js Express

PDF.js Express Version
8.7.0

Detailed description of issue
I need to set FillColor and StrokeColor of TextHighlightAnnotation.
I tried set:

const { Annotations } = this.viewerCore;
const annot = new this.Annotations.TextHighlightAnnotation();
annot.StrokeColor = strokeColor;
annot.FillColor = fillColor;
annot.FillDisplayColor = fillColor;

but I receive only highlight text, without border.
Moreover this works correctly when I export xfdf annotation and import them back.
How can I achieve it?

3

Hi there,

It looks like you are missing the addAnnotation and drawAnnotation after creating the highlight annotation.
Please follow the guide here to create a highlight annotation:

Best regards,
Kevin Kim

4

I call addAnnotation and drawAnnotation after creating the highlight annotation, just I not include it in code sample.

image
1.) When I import this sample annotation
2.) When I try to add this annotation immadiantely with addAnnotation and drawAnnotation method

5

Hi there,

Thanks for your response,

For the 1st example, it looks like there is no fill color/opacity compared to 2nd example.
Could you share the XFDF for both annotations to compare?

best regards,
Kevin Kim

6

I don’t have XFDF for both annotations because:

  • the 2nd was created programmaticaly,
  • the 1st one from xfdf importAnnotations

It’s looks like when I try add annotation programmaticaly 0.5 opacity on content doesn’t work, but during importing works correctly. (or if opacity work, I lose border)
I tried also redrawAnnotation but this was not effectively.
How can I achieve it with TextHighlightAnnotation during adding programmaticaly?

7

Hi there,

To get the XFDF of all the annotations in your PDF, you can call annotationManager.exportAnnotations()

For text highlight annotation, there is no border property:
https://pdfjs.express/api/Core.Annotations.TextHighlightAnnotation.html

I think the XFDF that you are importing has a opacity property and that is why it is causing the difference.

Best regards,
Kevin Kim

8

Did stroke property shouldn’t work for it? I was set stroke property correctly.

9

Hi there,

To get the alpha of the fill color, you will want to adjust the ‘StrokeColor’ with a 4th number,
i.e.
highlight.StrokeColor = new Annotations.Color(255, 255, 0, 0.5);

StrokeThickness may be the attribute you are looking for.

Best regards,
Kevin Kim