Here is an example of creating highlight annotations, but creating other types of annotations are similar.
WebViewer(...)
.then(instance => {
const { Annotations, annotManager, docViewer } = instance;
docViewer.on('documentLoaded', () => {
const highlight = new Annotations.TextHighlightAnnotation();
highlight.PageNumber = 4;
highlight.X = 405;
highlight.Y = 165;
highlight.Width = 275;
highlight.Height = 25;
highlight.StrokeColor = new Annotations.Color(255, 255, 0);
// you might get the quads from text selection, a server calculation, etc
highlight.Quads = [
{ x1: 644, y1: 178, x2: 682, y2: 178, x3: 682, y3: 168, x4: 644, y4: 168 },
{ x1: 408, y1: 190, x2: 458, y2: 190, x3: 458, y3: 180, x4: 408, y4: 180 }
];
annotManager.addAnnotation(highlight);
annotManager.drawAnnotations(highlight.PageNumber);
})
})
WebViewer(...)
.then(instance => {
const {
Annotations,
annotationManager,
documentViewer
} = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
const highlight = new Annotations.TextHighlightAnnotation();
highlight.PageNumber = 4;
highlight.X = 405;
highlight.Y = 165;
highlight.Width = 275;
highlight.Height = 25;
highlight.StrokeColor = new Annotations.Color(255, 255, 0);
// you might get the quads from text selection, a server calculation, etc
highlight.Quads = [
{ x1: 644, y1: 178, x2: 682, y2: 178, x3: 682, y3: 168, x4: 644, y4: 168 },
{ x1: 408, y1: 190, x2: 458, y2: 190, x3: 458, y3: 180, x4: 408, y4: 180 }
];
annotationManager.addAnnotation(highlight);
annotationManager.drawAnnotations(highlight.PageNumber);
})
})
Other examples
Creating rectangle annotations
To create a rectangle annotation.
Creating stamp annotations
To create a stamp annotation.
Creating free text annotations
To create a free text annotation.
Creating file attachment annotations
To create a file attachment annotation.
Creating custom annotations
To create a customized annotation.
