Skip to content

Adjust Existing Measurement Annotations

For existing measurement annotations, you can reset measurement-related information such as scale, units, and precision without redrawing the annotation.

You can adjust the properties of an existing measurement annotation through the following steps:

  1. Prepare the annotations that need to be adjusted.
  2. Use the selectAnnotation method to select annotations.
  3. Use the setPropertyPanel method to adjust the selected annotation. The parameter passed is an object, which contains any attribute in the default and defaultStyles of the measurement tool corresponding to the annotation. You can also pass whether to display UI attributes such as showPerimeter, showArea, showRadius, showArcLength, and showAngle of the annotation appearance, but please note that they cannot be passed together with other attributes.

Taking a line segment measurement annotation and a rectangle measurement annotation as examples, the following is an example code for adjusting existing measurement annotations:

javascript
const annotation = docViewer.annotations[0][0]; // The first annotation on the first page.

if (annotation.measure && annotation.type === 'line') {
    docViewer.selectAnnotation(annotation);
    docViewer.setPropertyPanel({
        precision: 1,
        opacity: 0.5,
        length: 3,
        borderColor: '#2D77FA',
        color: '#64BC38'
    });
}

if (annotation.measure && annotation.type === 'rectangle') {
    docViewer.selectAnnotation(annotation);
    docViewer.setPropertyPanel({
        precision: 0.01,
        length: 5.45,
        borderColor: '#64BC38',
        fillColor: '#FFEC66',
        fillTransparency: 0.5
    });
    docViewer.setPropertyPanel({ showPerimeter: true });
}