Here is an example of creating a free text annotation, but creating other types of annotations are similar.
WebViewer(...)
.then(instance => {
const { Annotations, annotManager, docViewer } = instance;
docViewer.on('documentLoaded', () => {
const freeText = new Annotations.FreeTextAnnotation();
freeText.PageNumber = 1;
freeText.X = 150;
freeText.Y = 200;
freeText.Width = 150;
freeText.Height = 50;
freeText.setPadding(new Annotations.Rect(0, 0, 0, 0));
freeText.setContents('My Text');
freeText.FillColor = new Annotations.Color(0, 255, 255);
freeText.FontSize = '16pt';
annotManager.addAnnotation(freeText);
annotManager.redrawAnnotation(freeText);
})
})
WebViewer(...)
.then(instance => {
const {
Annotations,
annotationManager,
documentViewer
} = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
const freeText = new Annotations.FreeTextAnnotation();
freeText.PageNumber = 1;
freeText.X = 150;
freeText.Y = 200;
freeText.Width = 150;
freeText.Height = 50;
freeText.setPadding(new Annotations.Rect(0, 0, 0, 0));
freeText.setContents('My Text');
freeText.FillColor = new Annotations.Color(0, 255, 255);
freeText.FontSize = '16pt';
annotationManager.addAnnotation(freeText);
annotationManager.redrawAnnotation(freeText);
})
})
Other examples
Creating rectangle annotations
To create a rectangle annotation.
Creating stamp annotations
To create a stamp 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.