Create circle-only annotation

Technical Support WebViewer
1

Hello,

We are looking for a way to create annotations which are circles (not ellipsis).
Is there a way to configure or extend EllipseAnnotation so that it can only draw circles ?

Thanks and best regards
Valentin

2

Hi Valenti,

It is possible.

If its from the UI, you can do the following:
When using the ellipse create tool, hold shift while dragging around.

If you want to do this programmatically, please use the following code snippet:

Tools.EllipseCreateTool.prototype.mouseMove = function(e) {
Tools.GenericAnnotationCreateTool.prototype.mouseMove.call(this, e);
const annotation = this[‘annotation’];
if (annotation) {
const width = annotation[‘Width’];
const height = annotation[‘Height’];
const maxDimension = Math.abs(width < height ? width : height);
annotation[‘Width’] = maxDimension;
annotation[‘Height’] = maxDimension;

// The following code ensures the annotation X and Y
// remains fixed to point where we started drawing,
// even as the annotation moves upwards or leftwards
const pt0 = this[‘pageCoordinates’][0];
const pt1 = this[‘pageCoordinates’][1];

const deltaX = pt1.x - pt0.x;
const deltaY = pt1.y - pt0.y;

const absDeltaX = Math.abs(deltaX);
const absDeltaY = Math.abs(deltaY);

const offset = absDeltaX < absDeltaY ? absDeltaX : absDeltaY;

if (deltaX < 0) {
annotation[‘X’] = pt0.x - offset;
}

if (deltaY < 0) {
annotation[‘Y’] = pt0.y - offset;
}

this.docViewer.annotationManager.redrawAnnotation(this[‘annotation’]);

// By toggling this on/off we can ensure the ellipsis remains
// a perfect circle when it is being resized when selected
annotation[‘MaintainAspectRatio’] = true;
}
};

Please let me know if either options were not what you were looking for.

Anthony Chen

Software Developer
PDFTron Systems Inc.

3

Hi Anthony,

Thank you!
We were looking for a programmatic approach so we will try your solution.

Regards,
Valentin