Measure distance in a PDF using JavaScript

Measure distance in a PDF using Nutrient Web SDK starting with version 2022.5. To measure distance in your app, contact the Sales team to add the Measurement Tools component to your license, or run the SDK in trial mode.

Measure distance in one of the following ways:

Measure the distance between two points
Measure the distance between multiple connected points

Measuring distance between two points

Measure the distance between two points in one of the following ways:

Using the built-in user interface (UI)
Programmatically

Measuring distance between two points using the built-in UI

To measure the distance between two points using the built-in UI, follow the steps below:

Click the measurement tools icon in the toolbar.
Tap Distance.
Draw a straight line between the two points you want to measure.

Measuring distance between two points programmatically

To measure the distance between two points programmatically, use the LineAnnotation shape constructor, which takes a measurementScale property and a measurementPrecision property as its parameters, as demonstrated in the code snippet below:

let pspdfkitInstance; // Global or module-level variable.
PSPDFKit.load({
  ...baseOptions,
  toolbarItems: [
    ...PSPDFKit.defaultToolbarItems,
    { type: "cloudy-rectangle", dropdownGroup: "shapes" },
    { type: "dashed-rectangle", dropdownGroup: "shapes" },
    { type: "cloudy-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-polygon", dropdownGroup: "shapes" },
    { type: "content-editor", dropdownGroup: "editor" },
    { type: "form-creator", dropdownGroup: "editor" },
    { type: "measure", dropdownGroup: "editor" },
    { type: "document-comparison", dropdownGroup: "editor" },
  ],
  measurementValueConfiguration: (documentScales) => {
    const customScale = {
      name: "myCustomScale",
      scale: {
        unitFrom: PSPDFKit.MeasurementScaleUnitFrom.POINTS, // Using the enum value.
        unitTo: PSPDFKit.MeasurementScaleUnitTo.CENTIMETERS, // Using the enum value.
        fromValue: 1,
        toValue: 0.05, // 1 pt = 0.05 cm
      },
      precision: PSPDFKit.MeasurementPrecision.TWO, // Using the enum value
      selected: true, // Make this the default scale.
    };
    return [customScale, ...documentScales];
  },
})
  .then(async (instance) => {
    try {
      // Create measurement annotation.
      const lineAnnotation = new PSPDFKit.Annotations.LineAnnotation({
        strokeColor: PSPDFKit.Color.RED,
        pageIndex: 0,
        startPoint: new PSPDFKit.Geometry.Point({ x: 100, y: 100 }),
        endPoint: new PSPDFKit.Geometry.Point({ x: 300, y: 300 }),
        boundingBox: new PSPDFKit.Geometry.Rect({
          left: 100,
          top: 100,
          width: 200,
          height: 200,
        }),
        measurementPrecision: "threeDp",
        measurementScale: {
          unitFrom: "in",
          unitTo: "in",
          fromValue: 1,
          toValue: 1,
        },
        lineCaps: { start: "butt", end: "butt" },
      });

      // Add the annotation to the document.
      await instance.create(lineAnnotation);
      console.log("Measurement annotation created and added to the document.");

      console.log((await instance.getAnnotations(0)).toJS());
    } catch (error) {
      console.error("Error creating or adding annotation:", error);
    }
  })
  .catch(function (error) {
    console.error("Error loading PDF:", error.message);
  });

You can try the code snippet above in our playground. For more information on scale and precision, refer to the guide on configuring measurements.

Measuring distance between multiple connected points

Measure the distance between multiple connected points in one of the following ways:

Using the built-in user interface (UI)
Programmatically

Measuring distance between multiple connected points using the built-in UI

To measure the distance between multiple connected points using the built-in UI, follow the steps below:

Click the measurement tools icon in the toolbar.
Tap Perimeter.
Draw lines between the multiple points you want to measure.

Measuring distance between multiple connected points programmatically

To measure the distance between multiple connected points programmatically, use the PolylineAnnotation shape constructor, which takes a measurementScale property and a measurementPrecision property as its parameters, as demonstrated in the code snippet below:

let pspdfkitInstance; // Global or module-level variable.
PSPDFKit.load({
  ...baseOptions,
  theme: PSPDFKit.Theme.DARK,
  toolbarItems: [
    ...PSPDFKit.defaultToolbarItems,
    { type: "cloudy-rectangle", dropdownGroup: "shapes" },
    { type: "dashed-rectangle", dropdownGroup: "shapes" },
    { type: "cloudy-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-polygon", dropdownGroup: "shapes" },
    { type: "content-editor", dropdownGroup: "editor" },
    { type: "form-creator", dropdownGroup: "editor" },
    { type: "measure", dropdownGroup: "editor" },
    { type: "document-comparison", dropdownGroup: "editor" },
  ],
  measurementValueConfiguration: (documentScales) => {
    const customDistanceScale = {
      name: "myCustomDistanceScale",
      scale: {
        unitFrom: "pt", // Simple string for points.
        unitTo: "cm",   // Simple string for centimeters.
        fromValue: 1,
        toValue: 0.05,
      },
      precision: "2", // Simple string for precision.
      selected: true,
    };
    return [customDistanceScale, ...documentScales];
  },
})
  .then(async (instance) => {
    console.log("Nutrient loaded!");
    try {
      // Define the points for the polyline (forming a zigzag).
      const points = PSPDFKit.Immutable.List([
        new PSPDFKit.Geometry.Point({ x: 100, y: 100 }),
        new PSPDFKit.Geometry.Point({ x: 200, y: 150 }),
        new PSPDFKit.Geometry.Point({ x: 150, y: 200 }),
        new PSPDFKit.Geometry.Point({ x: 250, y: 250 }),
      ]);

      // Calculate the bounding box (approximate).
      const minX = 100;
      const minY = 100;
      const maxX = 250;
      const maxY = 250;
      const boundingBox = new PSPDFKit.Geometry.Rect({
        left: minX,
        top: minY,
        width: maxX - minX,
        height: maxY - minY,
      });

      // Create the polyline annotation for distance measurement.
      const polylineAnnotation = new PSPDFKit.Annotations.PolylineAnnotation({
        strokeColor: PSPDFKit.Color.GREEN,
        pageIndex: 0,
        points: points,
        strokeWidth: 3,
        boundingBox: boundingBox,
        measurementPrecision: "twoDp", // Using string format.
        measurementScale: {
          unitFrom: "pt", // Simple string for points.
          unitTo: "cm",   // Simple string for centimeters.
          fromValue: 1,
          toValue: 0.05, // Linear conversion.
        },
        isMeasurement: true, // Mark it as a measurement.
      });

      // Add the annotation to the document.
      await instance.create(polylineAnnotation);
      console.log("Polyline distance measurement annotation created and added.");
      console.log((await instance.getAnnotations(0)).toJS());
    } catch (error) {
      console.error("Error creating or adding polyline measurement annotation:", error);
    }
  })
  .catch(function (error) {
    console.error("Error loading PDF:", error.message);
  });

You can try the code above snippet in our playground. For more information on scale and precision, refer to the guide on configuring measurements.

Configuring measurements

For more information on configuring measurements, refer to the guide on configuring measurements.