Measure Distance

The distance measurement tool allows your end-users to measure the distance between two points representing objects in a planar diagram, such as houses, streets, or walls. Upon selecting this tool, users only need to click on the starting and ending points with the pointer or finger to obtain the distance between the two points.

There are two types of distance measurement tools: the line segment measurement tool and the polyline measurement tool. The line segment measurement tool measures the distance between the starting and ending points, while the polyline measurement tool measures the distance between all adjacent points during the polyline drawing process and calculates the total length.

Taking the line segment measurement tool as an example, after configuring the measurement properties, you can create a line segment measurement annotation by following these steps:

1. Set the tool type to line segment measurement annotation creation mode.
2. Obtain the default properties of the distanceMeasurementCreateTool line segment measurement tool, 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 line segment measurement annotation:

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

    // Enter the line segment measurement annotation creation mode and initialize the DistanceMeasurementCreateTool.
    UI.setActiveToolMode('toolMenu-Measurement');
    UI.setActiveTool('measureLine');

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

    const annotationData = {
        measure: 1,
        operate: 'add-annot',
        type: 'line',
        measureType: 'distance',
        pageIndex: 0,
        date: new Date(),
        rect: {
            left: 130,
            top: 45,
            right: 300,
            bottom: 75
        },
        linePoints: [300, 45, 130, 75],
        ...defaults,
        ...defaultStyles,
        ...leaderLineDefaultOptions
    };

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