Hey there,
You need to override the draw function of whatever annotation you want to draw like this.
You can use the setCustomDrawHandler API to extend the draw function of an annotation.
const { Annotations } = instance;
Annotations.setCustomDrawHandler(Annotations.PolylineAnnotation, (ctx, pageMatrix, _, options) => {
if (options.annotation.ToolName === "AnnotationCreatePerimeterMeasurement") {
ctx.setLineDash([15, 3, 3, 3]);
}
options.originalDraw(ctx, pageMatrix)
})
In this function you have access to the canvas context, and you can do whatever you wish with that. In this scenerio, I’m calling setLineDash
to make the line dashed.
If you want, you can completely override this function and draw the entire annotation yourself:
Annotations.setCustomDrawHandler(Annotations.PolylineAnnotation, (ctx: CanvasRenderingContext2D, pageMatrix, __, options) => {
if (options.annotation.ToolName === "AnnotationCreatePerimeterMeasurement") {
const paths = options.annotation.getPath();
ctx.beginPath();
ctx.strokeStyle = 'red'
ctx.setLineDash([15, 3, 3, 3]);
ctx.moveTo(paths[0]['x'], paths[0]['y']);
for (let i = 1; i < paths.length; i++) {
ctx.lineTo(paths[i]['x'], paths[i]['y']);
}
ctx.stroke();
ctx.closePath();
} else {
options.originalDraw(ctx, pageMatrix)
}
})
This allows you to draw the lines however you wish.
Hopefully this is enough to get you started! Let me know if you need any more help.
Thanks,
Logan