How to change annotation styles for area and line tool like Stripped color and dashes

Technical Support
#1

Check attached image. Here I want to change drawn annotations (perimeter and area) to dashed colored strips same as that red-white stripped lines. ( Here in image, that red stripped annotations are in readOnly mode - instance.setReadOnly(true). But I dont want to apply readOnly mode instead change annotation’s apperance to the same as readOnly mode alike(red-white stripped).

highlight.PNG

I want to set annotation styles after some action from normal straight red colored annotation to stripped red colored annotation. I am using -
instance.annotManager.setAnnotationStyles(annotation, ....)
How can I use this to change annotation styles ?

#2

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