Measure Perimeter and Area

The perimeter and area measurement tool can be used to measure the perimeter and area of a polygonal region selected by the user.

After configuring the measurement properties, you can create a rectangular measurement annotation by following these steps:

1. Set the tool type to rectangle measurement annotation creation mode.
2. Obtain the default properties of the area measurement tool areaMeasurementCreateTool, and attach the default properties to the measurement annotation when creating it. Create measurement annotations using the creatMeasurementAnnotation method of the annotationManager class.

The following is an example code for creating a rectangle measurement annotation:

ComPDFKitViewer(...)
  .then(instance => {
    const { docViewer, UI } = instance;

    // Enter the rectangle measurement annotation creation mode and initialize the AreaMasurementCreateTool.
    UI.setActiveToolMode('toolMenu-Measurement');
    UI.setActiveTool('measureRectangle');

    // Set default measurement properties for the annotation.
    const defaults = docViewer.pdfViewer.areaMeasurementCreateTool.defaults;
    const defaultStyles = docViewer.pdfViewer.areaMeasurementCreateTool.defaultStyles;

    const annotationData = {
        measure: 1,
        operate: 'add-annot',
        type: 'polygon',
        measureType: 'area',
        pageIndex: 0,
        date: new Date(),
        rect: {
            left: 200,
            top: 350,
            right: 360,
            bottom: 460
        },
        vertices: [
            { x: 200, y: 350 },
            { x: 360, y: 350 },
            { x: 360, y: 460 },
            { x: 200, y: 460 }
        ],
        ...defaults,
        ...defaultStyles
    };

    // Create a measurement annotation.
    const annotation = await docViewer.annotationManager.createMeasurementAnnotation(annotationData);
    // Render the annotation.
    docViewer.annotationManager.drawAnnotationsFromList(annotation);