Section:

Create text highlighting annotations using JavaScript

Here is an example of creating highlight annotations using JavaScript, but creating other types of annotations are similar.

1WebViewer(...)
2  .then(instance => {
3    const { Annotations, annotationManager, documentViewer } = instance.Core;
4
5    documentViewer.addEventListener('documentLoaded', () => {
6      const highlight = new Annotations.TextHighlightAnnotation();
7      highlight.PageNumber = 4;
8      highlight.X = 405;
9      highlight.Y = 165;
10      highlight.Width = 275;
11      highlight.Height = 25;
12      highlight.StrokeColor = new Annotations.Color(255, 255, 0);
13      // you might get the quads from text selection, a server calculation, etc
14      highlight.Quads = [
15        { x1: 644, y1: 178, x2: 682, y2: 178, x3: 682, y3: 168, x4: 644, y4: 168 },
16        { x1: 408, y1: 190, x2: 458, y2: 190, x3: 458, y3: 180, x4: 408, y4: 180 }
17      ];
18
19      annotationManager.addAnnotation(highlight);
20      annotationManager.drawAnnotations(highlight.PageNumber);
21    })
22  })

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales