Measurement annotations

Creating measurement annotations with the UI

To create measurement annotations in WebViewer, click the Measure button in the top header, then select one of the measurement tools. Next use the selected tool to create a measurement annotation on the document. An overlay with scale and measurement information will show up when you are creating or selecting a measurement annotation.

Apryse Docs Image

Creating measurement scale with the UI

If there's no scale created before, the Scale modal will pop up when clicking on the document. Click the Create button to create a new scale. This initial scale will be applied to all the measurement tools.

Apryse Docs Image

Getting scale and precision programmatically

The following example shows how you can determine if an annotation is a measurement annotation, and logs the scale and precision of it after it's added:

1WebViewer(...)
2 .then(instance => {
3 const { annotationManager } = instance.Core;
4
5 annotationManager.addEventListener('annotationChanged', (annotations, action) => {
6 if (action === 'add') {
7 // An annotation is an measurement annotation if it contains a Measure property
8 const measurementAnnotations = annotations.filter(annotation => annotation.Measure);
9
10 measurementAnnotations.forEach(annotation => {
11 console.log(annotation.Scale);
12 console.log(annotation.Precision);
13 });
14 }
15 });
16 });

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales