|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Add Area Measurement Annotations in React PDF Viewer | Syncfusion |
| 4 | +description: Learn how to enable, draw, customize, and manage Area measurement annotations in the Syncfusion React PDF Viewer. |
| 5 | +platform: document-processing |
| 6 | +control: PDF Viewer |
| 7 | +documentation: ug |
| 8 | +domainurl: ##DomainURL## |
| 9 | +--- |
| 10 | + |
| 11 | +# Add Area Measurement Annotations in React PDF Viewer |
| 12 | +Area is a measurement annotation used to calculate the surface of a closed region on a PDF page—ideal for engineering, construction, or design reviews. |
| 13 | + |
| 14 | + |
| 15 | + |
| 16 | +## Enable Area Measurement |
| 17 | + |
| 18 | +To enable Area annotations, inject the following modules into the React PDF Viewer: |
| 19 | + |
| 20 | +- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation) |
| 21 | +- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar) |
| 22 | + |
| 23 | +{% tabs %} |
| 24 | +{% highlight js tabtitle="Standalone" %} |
| 25 | +{% raw %} |
| 26 | +import * as React from 'react'; |
| 27 | +import * as ReactDOM from 'react-dom/client'; |
| 28 | +import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer'; |
| 29 | + |
| 30 | +function App() { |
| 31 | + return ( |
| 32 | + <PdfViewerComponent |
| 33 | + id="container" |
| 34 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 35 | + resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" |
| 36 | + style={{ height: '650px' }} |
| 37 | + > |
| 38 | + <Inject services={[Toolbar, Annotation]} /> |
| 39 | + </PdfViewerComponent> |
| 40 | + ); |
| 41 | +} |
| 42 | + |
| 43 | +ReactDOM.createRoot(document.getElementById('sample')).render(<App />); |
| 44 | +{% endraw %} |
| 45 | +{% endhighlight %} |
| 46 | +{% endtabs %} |
| 47 | + |
| 48 | +## Add Area Annotation |
| 49 | + |
| 50 | +### Add Area Using the Toolbar |
| 51 | + |
| 52 | +1. Open the **Annotation Toolbar**. |
| 53 | +2. Select **Measurement** → **Area**. |
| 54 | +3. Click points to define the polygon; double‑click to close and finalize the area. |
| 55 | + |
| 56 | + |
| 57 | + |
| 58 | +> **Tip:** If Pan mode is active, choosing a measurement tool switches the viewer into the appropriate interaction mode for a smoother workflow. |
| 59 | +
|
| 60 | +### Enable Area Mode |
| 61 | +Programmatically switch the viewer into Area mode. |
| 62 | + |
| 63 | +{% tabs %} |
| 64 | +{% highlight js tabtitle="Standalone" %} |
| 65 | +{% raw %} |
| 66 | +function enableAreaMode() { |
| 67 | + const viewer = document.getElementById('container').ej2_instances[0]; |
| 68 | + viewer.annotation.setAnnotationMode('Area'); |
| 69 | +} |
| 70 | +{% endraw %} |
| 71 | +{% endhighlight %} |
| 72 | +{% endtabs %} |
| 73 | + |
| 74 | +#### Exit Area Mode |
| 75 | +{% tabs %} |
| 76 | +{% highlight js tabtitle="Standalone" %} |
| 77 | +{% raw %} |
| 78 | +function exitAreaMode() { |
| 79 | + const viewer = document.getElementById('container').ej2_instances[0]; |
| 80 | + viewer.annotation.setAnnotationMode('None'); |
| 81 | +} |
| 82 | +{% endraw %} |
| 83 | +{% endhighlight %} |
| 84 | +{% endtabs %} |
| 85 | + |
| 86 | +### Add Area Programmatically |
| 87 | +Use the [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) API to draw an area by providing **vertexPoints** for a closed region. |
| 88 | + |
| 89 | +{% tabs %} |
| 90 | +{% highlight js tabtitle="Standalone" %} |
| 91 | +{% raw %} |
| 92 | +function addArea() { |
| 93 | + const viewer = document.getElementById('container').ej2_instances[0]; |
| 94 | + viewer.annotation.addAnnotation('Area', { |
| 95 | + offset: { x: 200, y: 500 }, |
| 96 | + pageNumber: 1, |
| 97 | + vertexPoints: [ |
| 98 | + { x: 200, y: 500 }, |
| 99 | + { x: 288, y: 499 }, |
| 100 | + { x: 289, y: 553 }, |
| 101 | + { x: 200, y: 500 } |
| 102 | + ] |
| 103 | + }); |
| 104 | +} |
| 105 | +{% endraw %} |
| 106 | +{% endhighlight %} |
| 107 | +{% endtabs %} |
| 108 | + |
| 109 | +## Customize Area Appearance |
| 110 | +Configure default properties using the [`Area Settings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#areasettings) property (for example, default **fill color**, **stroke color**, **opacity**). |
| 111 | + |
| 112 | +{% tabs %} |
| 113 | +{% highlight js tabtitle="Standalone" %} |
| 114 | +{% raw %} |
| 115 | +<PdfViewerComponent |
| 116 | + id="container" |
| 117 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 118 | + resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" |
| 119 | + areaSettings={{ fillColor: 'yellow', strokeColor: 'orange', opacity: 0.6 }} |
| 120 | + style={{ height: '650px' }} |
| 121 | +> |
| 122 | + <Inject services={[Toolbar, Annotation]} /> |
| 123 | +</PdfViewerComponent> |
| 124 | +{% endraw %} |
| 125 | +{% endhighlight %} |
| 126 | +{% endtabs %} |
| 127 | + |
| 128 | +## Manage Area (Move, Reshape, Edit, Delete) |
| 129 | +- **Move**: Drag inside the polygon to reposition it. |
| 130 | +- **Reshape**: Drag any vertex handle to adjust points and shape. |
| 131 | + |
| 132 | +### Edit Perimeter |
| 133 | + |
| 134 | +#### Edit Perimeter (UI) |
| 135 | + |
| 136 | +- Edit the **fill color** using the Edit Color tool. |
| 137 | +  |
| 138 | +- Edit the **stroke color** using the Edit Stroke Color tool. |
| 139 | +  |
| 140 | +- Edit the **border thickness** using the Edit Thickness tool. |
| 141 | +  |
| 142 | +- Edit the **opacity** using the Edit Opacity tool. |
| 143 | +  |
| 144 | +- Open **Right Click → Properties** for additional line‑based options. |
| 145 | +  |
| 146 | + |
| 147 | +#### Edit Area Programmatically |
| 148 | + |
| 149 | +Update properties and call `editAnnotation()`. |
| 150 | + |
| 151 | +{% tabs %} |
| 152 | +{% highlight js tabtitle="Standalone" %} |
| 153 | +{% raw %} |
| 154 | +function editAreaProgrammatically() { |
| 155 | + const viewer = document.getElementById('container').ej2_instances[0]; |
| 156 | + for (const ann of viewer.annotationCollection) { |
| 157 | + if (ann.subject === 'Area calculation') { |
| 158 | + ann.strokeColor = '#0000FF'; |
| 159 | + ann.thickness = 2; |
| 160 | + ann.fillColor = '#FFFF00'; |
| 161 | + viewer.annotation.editAnnotation(ann); |
| 162 | + break; |
| 163 | + } |
| 164 | + } |
| 165 | +} |
| 166 | +{% endraw %} |
| 167 | +{% endhighlight %} |
| 168 | +{% endtabs %} |
| 169 | + |
| 170 | +### Delete Distance Annotation |
| 171 | + |
| 172 | +Delete Distance Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations). |
| 173 | + |
| 174 | +## Set Default Properties During Initialization |
| 175 | +Apply defaults for Area using the [`areaSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#areasettings) property. |
| 176 | + |
| 177 | +{% tabs %} |
| 178 | +{% highlight js tabtitle="Standalone" %} |
| 179 | +{% raw %} |
| 180 | +<PdfViewerComponent |
| 181 | + id="container" |
| 182 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 183 | + resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" |
| 184 | + areaSettings={{ fillColor: 'yellow', strokeColor: 'orange', opacity: 0.6 }} |
| 185 | + style={{ height: '650px' }} |
| 186 | +> |
| 187 | + <Inject services={[Toolbar, Annotation]} /> |
| 188 | +</PdfViewerComponent> |
| 189 | +{% endraw %} |
| 190 | +{% endhighlight %} |
| 191 | +{% endtabs %} |
| 192 | + |
| 193 | +## Set Properties While Adding Individual Annotation |
| 194 | +Pass per‑annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation). |
| 195 | + |
| 196 | +{% tabs %} |
| 197 | +{% highlight js tabtitle="Standalone" %} |
| 198 | +{% raw %} |
| 199 | +function addStyledArea() { |
| 200 | + const viewer = document.getElementById('container').ej2_instances[0]; |
| 201 | + viewer.annotation.addAnnotation('Area', { |
| 202 | + offset: { x: 210, y: 510 }, |
| 203 | + pageNumber: 1, |
| 204 | + vertexPoints: [ |
| 205 | + { x: 210, y: 510 }, |
| 206 | + { x: 300, y: 510 }, |
| 207 | + { x: 305, y: 560 }, |
| 208 | + { x: 210, y: 510 } |
| 209 | + ], |
| 210 | + strokeColor: '#EA580C', |
| 211 | + fillColor: '#FEF3C7', |
| 212 | + thickness: 2, |
| 213 | + opacity: 0.85 |
| 214 | + }); |
| 215 | +} |
| 216 | +{% endraw %} |
| 217 | +{% endhighlight %} |
| 218 | +{% endtabs %} |
| 219 | + |
| 220 | +## Scale Ratio and Units |
| 221 | +- Use **Scale Ratio** from the context menu to set the actual‑to‑page scale. |
| 222 | +  |
| 223 | +- Supported units include **Inch, Millimeter, Centimeter, Point, Pica, Feet**. |
| 224 | +  |
| 225 | + |
| 226 | +### Set Default Scale Ratio During Initialization |
| 227 | +Configure scale defaults using [`measurementSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#mesaurementsettings). |
| 228 | + |
| 229 | +{% tabs %} |
| 230 | +{% highlight js tabtitle="Standalone" %} |
| 231 | +{% raw %} |
| 232 | +<PdfViewerComponent |
| 233 | + id="container" |
| 234 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 235 | + resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" |
| 236 | + measurementSettings={{ scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' }} |
| 237 | + style={{ height: '650px' }} |
| 238 | +> |
| 239 | + <Inject services={[Toolbar, Annotation]} /> |
| 240 | +</PdfViewerComponent> |
| 241 | +{% endraw %} |
| 242 | +{% endhighlight %} |
| 243 | +{% endtabs %} |
| 244 | + |
| 245 | +## Handle Area Events |
| 246 | + |
| 247 | +Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see [**Annotation Events**](../annotation-event). |
| 248 | + |
| 249 | +## Export and Import |
| 250 | +Area measurements can be exported or imported with other annotations. For workflows and supported formats, see [**Export and Import annotations**](../export-import-annotations). |
| 251 | + |
| 252 | +## See Also |
| 253 | +- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar) |
| 254 | +- [Customize Context Menu](../../context-menu/custom-context-menu) |
| 255 | +- [Comments Panel](../comments) |
| 256 | +- [Annotation Events](../annotation-event) |
| 257 | +- [Export and Import annotations](../export-import-annotations) |
| 258 | +- [Delete Annotations](../remove-annotations) |
0 commit comments