Customizing default annotation styles

An annotation's default style is the style it is created with when created through its associated tool. For example, a freetext annotation create tool may set the stroke color, stroke thickness, fill color, text color, font size and/or opacity of the annotation shortly after creation, which becomes their 'default' or initial style.

To change the default style, you can use the setStyles API on the tool objects.

1WebViewer({ ... }, viewerElement)
2  .then(instance => {
3    const { documentViewer, Annotations } = instance.Core;
4
5    documentViewer.getTool('AnnotationCreateTextHighlight').setStyles({
6      StrokeColor: new Annotations.Color(0, 221, 255)
7    });
8
9    documentViewer.getTool('AnnotationCreateFreeText').setStyles({
10      StrokeThickness: 5,
11      StrokeColor: new Annotations.Color(0, 0, 255),
12      TextColor: new Annotations.Color(0, 0, 0),
13      FontSize: '20pt'
14    });
15  });

1WebViewer({ ... }, viewerElement)
2  .then(instance => {
3    const { docViewer, Annotations } = instance;
4
5    docViewer.getTool('AnnotationCreateTextHighlight').setStyles(currentStyle => ({
6      StrokeColor: new Annotations.Color(0, 221, 255)
7    }));
8
9    docViewer.getTool('AnnotationCreateFreeText').setStyles(currentStyle => ({
10      StrokeThickness: 5,
11      StrokeColor: new Annotations.Color(0, 0, 255),
12      TextColor: new Annotations.Color(0, 0, 0),
13      FontSize: '20pt'
14    }));
15  });

On the annotation create tools, you will find a defaults object that contains the values used to initialize the annotation style properties. If you need to read the initial values, you can use this object.

1WebViewer({ ... }, viewerElement)
2  .then(instance => {
3    const { documentViewer, Annotations } = instance.Core;
4
5    const highlightCreateTool = documentViewer.getTool('AnnotationCreateTextHighlight');
6
7    highlightCreateTool.defaults.StrokeColor = new Annotations.Color(0, 221, 255);
8
9    console.log(highlightCreateTool.defaults.StrokeColor);
10  });

1WebViewer({ ... }, viewerElement)
2  .then(instance => {
3    const { docViewer, Annotations } = instance;
4
5    const highlightCreateTool = docViewer.getTool('AnnotationCreateTextHighlight');
6
7    highlightCreateTool.defaults.StrokeColor = new Annotations.Color(0, 221, 255);
8
9    console.log(highlightCreateTool.defaults.StrokeColor);
10  });

If you want to check out which properties are available on the annotations themselves, check out the annotation type guides.