An annotation's default style is often governed by a tool associated with it. For example, a tool will set stroke color, stroke thickness, fill color, text color, font size and opacity of the annotation, which becomes their 'default' style. To change these properties, you can use the setStyles function on the tool objects.
WebViewer({ ... }, viewerElement)
.then(instance => {
const { docViewer, Annotations } = instance;
docViewer.getTool('AnnotationCreateTextHighlight').setStyles({
StrokeColor: new Annotations.Color(0, 221, 255)
});
docViewer.getTool('AnnotationCreateFreeText').setStyles({
StrokeThickness: 5,
StrokeColor: new Annotations.Color(0, 0, 255),
TextColor: new Annotations.Color(0, 0, 0),
FontSize: '20pt'
});
});
WebViewer({ ... }, viewerElement)
.then(instance => {
const { documentViewer, Annotations } = instance.Core;
documentViewer.getTool('AnnotationCreateTextHighlight').setStyles({
StrokeColor: new Annotations.Color(0, 221, 255)
});
documentViewer.getTool('AnnotationCreateFreeText').setStyles({
StrokeThickness: 5,
StrokeColor: new Annotations.Color(0, 0, 255),
TextColor: new Annotations.Color(0, 0, 0),
FontSize: '20pt'
});
});
You can also update the styles of the annotation directly. This method is often used when creating annotations programatically.
WebViewer({...}).then(instance => {
const { Annotations, docViewer, annotManager } = instance;
docViewer.on('documentLoaded', () => {
const annot = new Annotations.RectangleAnnotation();
annot.Width = 100;
annot.Height = 50;
annot.X = 50;
annot.Y = 50;
annot.FillColor = new Annotations.Color(255, 0, 0);
annot.StrokeColor = new Annotations.Color(0, 0, 0);
annot.StrokeThickness = 5;
annotManager.addAnnotation(annot);
})
})
WebViewer({...}).then(instance => {
const {
Annotations,
documentViewer,
annotationManager
} = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
const annot = new Annotations.RectangleAnnotation();
annot.Width = 100;
annot.Height = 50;
annot.X = 50;
annot.Y = 50;
annot.FillColor = new Annotations.Color(255, 0, 0);
annot.StrokeColor = new Annotations.Color(0, 0, 0);
annot.StrokeThickness = 5;
annotationManager.addAnnotation(annot);
})
})
The code above adds a red, 100 x 50 rectangle with a 5pt black border. The style properties that are available to be set at listed in the API docs. Make sure to check what properties exist on the classes the annotation extends as well.
