Custom Selection area for annotation.

Technical Support WebViewer
1

I added a custom icon (a circle) for StickyAnnotation by overriding the draw function:

StickyAnnotation.prototype.draw = function (ctx) {
ctx.fillStyle = “#ffff00”;
ctx.beginPath();
ctx.arc(0, 0, MARKER_RADIUS, 0, 2 * Math.PI);
ctx.fill();
};

However, the selection area is still square shaped and it starts from the center of the circle leaving the top half unselectable. I tried to provide a custom selection model but I was only able to fix the selection outline. The actual selectable area stays the same. Is there a way to specify the selection area to cover the whole circle? Thanks

selection-model.png

Filestage Logo
web www.filestage.io
phone +49 711 96589050
office Lautenschlagerstraße 16, 70173 Stuttgart, DE
Filestage GmbH, Amtsgericht Stuttgart: HRB 749557
Geschäftsführer: Niklas Dorn, Maël Frize, Simon Kontschak
LinkedInTwitterFacebook

Working from home? We’ve created these resources for you:

2

Hi,

Due to the special NoZoom property on sticky annotations, it’s a bit tricky to customize the draw function.

The key here is that sticky annotations have a fixed width and height of 31, so when in you draw function you should start at 10.5 and 10.5.

const width = 31;
const height = 31;
const MARKER_RADIUS = 13;

instance.Annotations.StickyAnnotation.prototype.draw = function(ctx) {
ctx.fillStyle = “#ffff00”;
ctx.beginPath();
ctx.arc(width / 2, height / 2, MARKER_RADIUS, 0, 2 * Math.PI);
ctx.fill();
};

Best Regards,
Zhijie Zhang
Developer
PDFTron Systems Inc.

3

Thank you! Good to know about these constraints. In this case, modifying the selection area by overriding the testSelection method on the SelectionModel seems to work. I will keep the info in mind for further customization.