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.

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

1. Set the tool type to measurement annotation creation mode.
2. Obtain the default properties of the corresponding measurement tool (if creating a line segment measurement, use Tools.ToolNames.DISTANCE_MEASUREMENT; if creating a polyline measurement, use Tools.ToolNames.PERIMETER_MEASUREMENT), and attach the default properties and the Measure of the tool to the measurement annotation when creating. Create the measurement annotation with the corresponding class in Annotations and add it using the addAnnotation method of annotationManager.

Create line segment measurement

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

ComPDFKitViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations, Tools } = instance.Core;

    documentViewer.addEventListener('documentLoaded', async () => {
        // Enter the line segment measurement annotation creation mode.
        instance.UI.setToolbarGroup('toolbarGroup-Measure');
        instance.UI.setToolMode(Tools.ToolNames.DISTANCE_MEASUREMENT);

        // Set default measurement properties for the annotation.
        const lineTool = documentViewer.getTool(Tools.ToolNames.DISTANCE_MEASUREMENT);
        const { StrokeColor, StrokeThickness, Opacity, Font, FontSize, StartLineStyle, EndLineStyle } = lineTool.defaults;
        const { leaderLineLength, leaderLineOffset, leaderLineExtension } = lineTool.getLeaderLineDefaultOptions();

        const annotation = new Annotations.LineAnnotation({
            PageNumber: 1,
            StrokeColor,
            StrokeThickness,
            Opacity,
            Font,
            FontSize
        });
        annotation.Measure = { ...lineTool.Measure };
        annotation.setStartPoint(300, 45);
        annotation.setEndPoint(130, 75);
        annotation.setStartStyle(StartLineStyle);
        annotation.setEndStyle(EndLineStyle);
        annotation.leaderLength = leaderLineLength;
        annotation.leaderOffset = leaderLineOffset;
        annotation.leaderExtension = leaderLineExtension;

        // Create a measurement annotation.
        await annotationManager.addAnnotation(annotation);
        // Render the annotation.
        annotationManager.drawAnnotationsFromList([annotation]);
    });
  });

Create polyline measurement

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

ComPDFKitViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations, Tools } = instance.Core;

    documentViewer.addEventListener('documentLoaded', async () => {
        // Enter the polyline measurement annotation creation mode.
        instance.UI.setToolbarGroup('toolbarGroup-Measure');
        instance.UI.setToolMode(Tools.ToolNames.PERIMETER_MEASUREMENT);

        // Set default measurement properties for the annotation.
        const polylineTool = documentViewer.getTool(Tools.ToolNames.PERIMETER_MEASUREMENT);
        const { StrokeColor, StrokeThickness, Opacity, Font, FontSize } = polylineTool.defaults;

        const annotation = new Annotations.PolylineAnnotation({
            PageNumber: 1,
            StrokeColor,
            StrokeThickness,
            Opacity,
            Font,
            FontSize
        });
        annotation.Measure = { ...polylineTool.Measure };
        annotation.setPath([
            new Annotations.Point(130, 156),
            new Annotations.Point(202, 120),
            new Annotations.Point(263, 223),
            new Annotations.Point(157, 232)
        ]);

        // Create a measurement annotation.
        await annotationManager.addAnnotation(annotation);
        // Render the annotation.
        annotationManager.drawAnnotationsFromList([annotation]);
    });
  });