Skip to content

Commit bea1ae5

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1010724: Measurement Annotation Updated using Diataxis
1 parent f87a341 commit bea1ae5

5 files changed

Lines changed: 1109 additions & 1 deletion

File tree

‎Document-Processing-toc.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -976,10 +976,14 @@
976976
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/rectangle-annotation">Rectangle</a></li>
977977
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/circle-annotation">Circle</a></li>
978978
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/polygon-annotation">Polygon</a></li>
979-
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/stamp-annotation">Stamp</a></li>
979+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/stamp-annotation">Stamp</a></li>
980980
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/ink-annotation">Ink</a></li>
981981
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/free-text-annotation">Free Text</a></li>
982982
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/distance-annotation">Distance</a></li>
983+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/perimeter-annotation">Perimeter</a></li>
984+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/area-annotation">Area</a></li>
985+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/radius-annotation">Radius</a></li>
986+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/volume-annotation">Volume</a></li>
983987
</ul>
984988
</li>
985989
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/text-markup-annotation">Text Markup Annotation</a></li>

‎Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/area-annotation.md‎

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

0 commit comments

Comments
 (0)