Here is an example of creating a rectangle annotation, but creating other types of annotations are similar.
WebViewer(...)
.then(instance => {
const { Annotations, annotManager, docViewer } = instance;
docViewer.on('documentLoaded', () => {
const rectangleAnnot = new Annotations.RectangleAnnotation();
rectangleAnnot.PageNumber = 1;
// values are in page coordinates with (0, 0) in the top left
rectangleAnnot.X = 100;
rectangleAnnot.Y = 150;
rectangleAnnot.Width = 200;
rectangleAnnot.Height = 50;
rectangleAnnot.Author = annotManager.getCurrentUser();
annotManager.addAnnotation(rectangleAnnot);
// need to draw the annotation otherwise it won't show up until the page is refreshed
annotManager.redrawAnnotation(rectangleAnnot);
})
})
WebViewer(...)
.then(instance => {
const {
Annotations,
annotationManager,
documentViewer
} = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
const rectangleAnnot = new Annotations.RectangleAnnotation();
rectangleAnnot.PageNumber = 1;
// values are in page coordinates with (0, 0) in the top left
rectangleAnnot.X = 100;
rectangleAnnot.Y = 150;
rectangleAnnot.Width = 200;
rectangleAnnot.Height = 50;
rectangleAnnot.Author = annotationManager.getCurrentUser();
annotationManager.addAnnotation(rectangleAnnot);
// need to draw the annotation otherwise it won't show up until the page is refreshed
annotationManager.redrawAnnotation(rectangleAnnot);
})
})
Other examples
Creating stamp annotations
To create a stamp annotation.
Creating free text annotations
To create a free text annotation.
Creating highlight annotations
To create a highlight annotation.
Creating file attachment annotations
To create a file attachment annotation.
Creating custom annotations
To create a customized annotation.
