Custom Selection area for annotation.

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

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

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


Filestage Logo
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

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


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.arc(width / 2, height / 2, MARKER_RADIUS, 0, 2 * Math.PI);

Best Regards,
Zhijie Zhang
PDFTron Systems Inc.

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.