Annotations created in WebViewer can have their border appearance edited like so:
WebViewer(…).then(instance => {
// Assumes an annotation exists with the variable name ‘annot’
instance.annotManager.setAnnotationStyles(
annot,
{
Style: ‘dash’,
Dashes: ‘3,4,5’
}
);
});
For a more complete example, to create a Rectangle Annotation with a dashed border:
WebViewer(…).then(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 = 220;
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.setAnnotationStyles(rectangleAnnot, {Style: ‘dash’, Dashes: ‘3,4,5’});
annotManager.redrawAnnotation(rectangleAnnot);
annotManager.selectAnnotation(rectangleAnnot);
annotManager.updateCopiedAnnotations();
});
});
For more information on what the Dashes values mean, see:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash