Syncfusion AI Assistant

How can I help you?

Add Distance Annotations in Angular PDF Viewer

26 Mar 202610 minutes to read

Distance is a measurement annotation used to measure the length between two points on a PDF page. Use it for precise reviews, markups, or engineering measurements.

Distance overview

Enable Distance Annotation

To enable Distance annotation, inject the following modules into the Angular PDF Viewer:

import { Component } from '@angular/core';
import {
  PdfViewerModule,
  ToolbarService,
  AnnotationService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        id="pdfViewer"
        [documentPath]="document"
        [resourceUrl]="resource"
        style="height:650px;display:block">
      </ejs-pdfviewer>
    </div>
  `,
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService]
})
export class AppComponent {

  public document: string =
    'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

  public resource: string =
    'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
}

Add Distance Annotation

Add Distance Using the Toolbar

  1. Open the Annotation Toolbar.
  2. Select Measurement → Distance.
  3. Click to set the start point, then click again to set the end point.

Measurement toolbar

NOTE

If Pan mode is active, choosing a measurement tool switches the viewer into the appropriate interaction mode for a smoother workflow.

Enable Distance Mode

Programmatically switch the viewer into Distance mode.

enableDistanceMode(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
  pdfViewer.annotationModule.setAnnotationMode('Distance');
}

Exit Distance Mode

exitDistanceMode(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
  pdfViewer.annotationModule.setAnnotationMode('None');
}

Add Distance Programmatically

Use the addAnnotation API to draw a Distance measurement by providing two vertexPoints.

addDistance(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
  pdfViewer.annotation.addAnnotation('Distance', {
    offset: { x: 200, y: 230 },
    pageNumber: 1,
    vertexPoints: [
      { x: 200, y: 230 },
      { x: 350, y: 230 }
    ]
  });
}

Customize Distance Appearance

Configure default properties using the Distance Settings property (for example, default fill color, stroke color, opacity).

import { Component } from '@angular/core';
import {
  PdfViewerModule,
  ToolbarService,
  AnnotationService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        id="pdfViewer"
        [documentPath]="document"
        [resourceUrl]="resource"
        [distanceSettings]="distanceSettings"
        style="height:650px;display:block">
      </ejs-pdfviewer>
    </div>
  `,
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService]
})
export class AppComponent {

  public document: string =
    'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

  public resource: string =
    'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  // Distance annotation default settings
  public distanceSettings = {
    fillColor: 'blue',
    strokeColor: 'green',
    opacity: 0.6
  };
}

Manage Distance (Move, Resize, Edit, Delete)

  • Move: Drag the measurement to reposition it.
  • Resize: Drag the end handles to adjust the length.

Edit Distance

Edit Distance (UI)

Change stroke color, thickness, and opacity using the annotation toolbar tools.

  • Edit the fill color using the Edit Color tool.
    Fill color
  • Edit the stroke color using the Edit Stroke Color tool.
    Stroke color
  • Edit the border thickness using the Edit Thickness tool.
    Thickness
  • Edit the opacity using the Edit Opacity tool.
    Opacity
  • Open Right Click → Properties for additional line-based options.
    Line properties

Edit Distance Programmatically

Update properties and call editAnnotation().

editDistanceProgrammatically(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
  for (const ann of pdfViewer.annotationCollection) {
    if (ann.subject === 'Distance calculation') {
      ann.strokeColor = '#0000FF';
      ann.thickness = 2;
      ann.opacity = 0.8;
      pdfViewer.annotation.editAnnotation(ann);
      break;
    }
  }
}

Delete Distance Annotation

Delete Distance Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see Delete Annotation.

Set Default Properties During Initialization

Apply defaults for Distance using the distanceSettings property.

import { Component } from '@angular/core';
import {
  PdfViewerModule,
  ToolbarService,
  AnnotationService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        id="pdfViewer"
        [documentPath]="document"
        [resourceUrl]="resource"
        [distanceSettings]="distanceSettings"
        style="height:650px;display:block">
      </ejs-pdfviewer>
    </div>
  `,
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService]
})
export class AppComponent {

  public document: string =
    'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

  public resource: string =
    'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  // Distance annotation default settings
  public distanceSettings = {
    fillColor: 'blue',
    strokeColor: 'green',
    opacity: 0.6
  };
}

Set Properties While Adding Individual Annotation

Pass per-annotation values directly when calling addAnnotation.

addStyledDistance(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
  pdfViewer.annotation.addAnnotation('Distance', {
    offset: { x: 220, y: 260 },
    pageNumber: 1,
    vertexPoints: [
      { x: 220, y: 260 },
      { x: 360, y: 260 }
    ],
    strokeColor: '#059669',
    opacity: 0.9,
    fillColor: '#D1FAE5',
    thickness: 2
  });
}

Scale Ratio and Units

  • Use Scale Ratio from the context menu to set the actual-to-page scale.
    Scale ratio
  • Supported units include Inch, Millimeter, Centimeter, Point, Pica, Feet.
    Scale dialog

Set Default Scale Ratio During Initialization

Configure scale defaults using measurementSettings.

import { Component } from '@angular/core';
import {
  PdfViewerModule,
  ToolbarService,
  AnnotationService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        id="pdfViewer"
        [documentPath]="document"
        [resourceUrl]="resource"
        [measurementSettings]="measurementSettings"
        style="height:640px;display:block">
      </ejs-pdfviewer>
    </div>
  `,
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService]
})
export class AppComponent {

  public document: string =
    'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

  public resource: string =
    'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  // Distance / Measurement configuration
  public measurementSettings = {
    scaleRatio: 2,
    conversionUnit: 'cm',
    displayUnit: 'cm'
  };
}

Handle Distance Events

Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see Annotation Events.

Export and Import

Distance measurements can be exported or imported with other annotations. For workflows and supported formats, see Export and Import annotations.

See Also