Round Corner in the PolyLine annotation

Technical Support WebViewer
, , ,
1

WebViewer Version: 10.11.0

I have created a frame with using Polyline annotation, but frame has corner. I want round corner in that frame. Please find below image for more info.

RoundCorner
RoundCorner1581×614 39.4 KB

Please let me know How can I make round corner in the Polyline annotation.?

2

Hello Rahul,

Thank you for contacting WebViewer Forums.

Currently, the polyline annotation does not support using rounded corners. However, you may be able to customize the annotation behaviour programatically using setCustomDrawHandler() and modify the context.

More information here: Customize-rendering | Apryse Documentation

Regards,
Luke

3

Hi Luke,

I tried to use this function setCustomDrawHandler() for round corner but did not get any success.
Can you provide me some codes or any example (where you have done something like that) to achieve round corner in the polyline annotation.?

Thanks in advance

4

Hello Rahul,

Please review the sample code below which was used for FreeText annotation. This can be sampled and modified for Polyline. The ctx pathing will have to be changed:

const { Annotations } = instance.Core;
Annotations.setCustomDrawHandler(Annotations.FreeTextAnnotation, function (ctx, pageMatrix, rotation, options) {
    options.originalDraw(ctx, pageMatrix); // Draw original annotation
    console.log(options);
    const annot = options.annotation;

    const x = annot.getX();
    const y = annot.getY();
    const width = annot.getWidth();
    const height = annot.getHeight();
    const radius = 5;
    const fontSize = 12;

    ctx.save();
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.arcTo(x + width, y, x + width, y + height, radius);
    ctx.arcTo(x + width, y + height, x, y + height, radius);
    ctx.arcTo(x, y + height, x, y, radius);
    ctx.arcTo(x, y, x + width, y, radius);
    ctx.closePath();
    ctx.stroke();

    ctx.restore();
  });

Regards,
Luke