Volume Annotation in React PDF Viewer

21 Oct 20269 minutes to read

Volume measurement annotations allow users to draw circular regions and calculate the volume visually.

Volume overview

Enable Volume Measurement

Inject the Annotation and Toolbar modules to enable volume annotation tools.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { PdfViewerComponent, Toolbar, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';

function App() {
  return (
    <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      style={{ height: '650px' }}
    >
      <Inject services={[Toolbar, Annotation]} />
    </PdfViewerComponent>
  );
}

ReactDOM.createRoot(document.getElementById('sample')).render(<App/>);

Add Volume Annotation

Draw Volume Using the Toolbar

  1. Open the Annotation Toolbar.
  2. Select Measurement → Volume.
  3. Click and drag on the page to draw the volume.

Measurement toolbar

If Pan mode is active, selecting the Volume tool automatically switches interaction mode.

Enable Volume Mode

Programmatically switch the viewer into Volume mode.

function enableVolumeMode() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.annotation.setAnnotationMode('Volume');
}

Exit Volume Mode

function exitVolumeMode() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.annotation.setAnnotationMode('None');
}

Add Volume Programmatically

Use addAnnotation() to insert a Volume measurement at a specific page location with optional offset, dimensions, and styling.

function addVolume() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.annotation.addAnnotation('Volume', {
    offset: { x: 200, y: 810 },
    pageNumber: 1,
    width: 90,
    height: 90
  });
}

Customize Volume Appearance

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

<PdfViewerComponent
  id="container"
  documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
  resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
  volumeSettings={{ fillColor: 'yellow', strokeColor: 'orange', opacity: 0.6 }}
  style={{ height: '650px' }}
>
  <Inject services={[Toolbar, Annotation]} />
</PdfViewerComponent>

Supported Border Styles

In addition to the default Solid border, Volume annotations support the following additional border styles:

  • Cloud — scalloped cloud border.
  • Dashed — dashed line border.

Use BorderStyle values such as BorderStyle.Cloud and BorderStyle.Dashed together with the optional borderDashArray and cloudIntensity settings in the volumeSettings property.

Property Type Description
borderStyle BorderStyle Specifies the border style. Supported values: BorderStyle.Solid, BorderStyle.Cloud, and BorderStyle.Dashed.
borderDashArray number[] Specifies the dash pattern when borderStyle is BorderStyle.Dashed.
cloudIntensity number Specifies the cloud border intensity. Supported range: 1 to 2; default value: 1.

borderStyle, borderDashArray, and cloudIntensity are preserved during save, reload, import, and export.

Apply a Cloud Border

export enum BorderStyle {
    Solid = 'Solid',
    Dashed = 'Dashed',
    Cloud = 'Cloud'
}
<PdfViewerComponent
  id="container"
  documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
  resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
  volumeSettings={{
    fillColor: 'yellow',
    strokeColor: 'orange',
    opacity: 0.6,
    borderStyle: BorderStyle.Cloud,
    cloudIntensity: 2
  }}
  style={{ height: '650px' }}
>
  <Inject services={[Toolbar, Annotation]} />
</PdfViewerComponent>

Apply a Dashed Border

<PdfViewerComponent
  id="container"
  documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
  resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
  volumeSettings={{
    fillColor: 'yellow',
    strokeColor: 'orange',
    opacity: 0.6,
    borderStyle: BorderStyle.Dashed,
    borderDashArray: [5, 5]
  }}
  style={{ height: '650px' }}
>
  <Inject services={[Toolbar, Annotation]} />
</PdfViewerComponent>

Manage Volume (Move, Reshape, Delete)

  • Move: Drag inside the polygon to reposition it.
  • Reshape: Drag any vertex handle to adjust points and shape.

Edit Volume Annotation

Edit Volume (UI)

  • 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 Volume Programmatically

Update properties and call editAnnotation().

function editVolumeProgrammatically() {
  const viewer = document.getElementById('container').ej2_instances[0];
  for (const ann of viewer.annotationCollection) {
    if (ann.subject === 'Volume calculation') {
      ann.strokeColor = '#0000FF';
      ann.thickness = 2;
      ann.opacity = 0.8;
      viewer.annotation.editAnnotation(ann);
      break;
    }
  }
}

Delete Volume Annotation

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

Set Default Properties During Initialization

Apply defaults for Volume using the volumeSettings property.

<PdfViewerComponent
  id="container"
  documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
  resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
  volumeSettings={{ fillColor: 'yellow', opacity: 0.6, strokeColor: 'yellow' }}
  style={{ height: '650px' }}
>
  <Inject services={[Toolbar, Annotation]} />
</PdfViewerComponent>

Set Properties While Adding Individual Annotation

Apply defaults for Volume using the volumeSettings property.

function addStyledVolume() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.annotation.addAnnotation('Volume', {
    offset: { x: 200, y: 810 },
    pageNumber: 1,
    width: 90,
    height: 90,
    fillColor: 'yellow',
    opacity: 0.6,
    strokeColor: 'yellow'
  });
}

Scale Ratio & Units

  • Use Scale Ratio from the context menu.
    Scale ratio
  • Supported units: Inch, Millimeter, Centimeter, Point, Pica, Feet.
    Scale dialog

Set Default Scale Ratio During Initialization

Configure scale defaults using measurementSettings.

<PdfViewerComponent
  id="container"
  documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
  resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
  measurementSettings={{ scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' }}
  style={{ height: '650px' }}
>
  <Inject services={[Toolbar, Annotation]} />
</PdfViewerComponent>

Handle Volume Events

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

Export and Import

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

See Also