Skip to content

Commit ece432e

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1007872: Updated Annotation Types in Angular PDF Viewer
1 parent d73cc4e commit ece432e

20 files changed

Lines changed: 5730 additions & 0 deletions

‎Document-Processing-toc.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -687,6 +687,29 @@
687687
<li><a href="/document-processing/pdf/pdf-viewer/angular/text-search">Text Search</a></li>
688688
<li>Annotation
689689
<ul>
690+
<li>Annotation Types
691+
<ul>
692+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/highlight-annotation">Highlight</a></li>
693+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/underline-annotation">Underline</a></li>
694+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/strikethrough-annotation">Strikethrough</a></li>
695+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/squiggly-annotation">Squiggly</a></li>
696+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/line-annotation">Line</a></li>
697+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/arrow-annotation">Arrow</a></li>
698+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/rectangle-annotation">Rectangle</a></li>
699+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/circle-annotation">Circle</a></li>
700+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/polygon-annotation">Polygon</a></li>
701+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/ink-annotation">Ink</a></li>
702+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/stamp-annotation">Stamp</a></li>
703+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/sticky-notes">Sticky Notes</a></li>
704+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/redaction-annotation">Redaction</a></li>
705+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/free-text-annotation">Free Text</a></li>
706+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/distance-annotation">Distance</a></li>
707+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/perimeter-annotation">Perimeter</a></li>
708+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/area-annotation">Area</a></li>
709+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/radius-annotation">Radius</a></li>
710+
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-types/volume-annotation">Volume</a></li>
711+
</ul>
712+
</li>
690713
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/text-markup-annotation">Text Markup Annotation</a></li>
691714
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/shape-annotation">Shape Annotation</a></li>
692715
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/stamp-annotation">Stamp Annotation</a></li>

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

Lines changed: 347 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,347 @@
1+
---
2+
layout: post
3+
title: Add Area Measurement Annotations in Angular PDF Viewer | Syncfusion
4+
description: Learn how to enable, draw, customize, and manage Area measurement annotations in the Syncfusion Angular PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Add Area Measurement Annotations in Angular 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+
## Enable Area Measurement
17+
18+
To enable Area annotations, inject the following modules into the Angular PDF Viewer:
19+
20+
- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
21+
- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
22+
23+
{% tabs %}
24+
{% highlight ts tabtitle="Standalone" %}
25+
26+
import { Component } from '@angular/core';
27+
import {
28+
PdfViewerModule,
29+
ToolbarService,
30+
AnnotationService
31+
} from '@syncfusion/ej2-angular-pdfviewer';
32+
33+
@Component({
34+
selector: 'app-root',
35+
template: `
36+
<div class="content-wrapper">
37+
<ejs-pdfviewer
38+
id="pdfViewer"
39+
[documentPath]="document"
40+
[resourceUrl]="resource"
41+
style="height:650px;display:block">
42+
</ejs-pdfviewer>
43+
</div>
44+
`,
45+
imports: [PdfViewerModule],
46+
providers: [ToolbarService, AnnotationService]
47+
})
48+
export class AppComponent {
49+
50+
public document: string =
51+
'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
52+
53+
public resource: string =
54+
'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
55+
}
56+
57+
{% endhighlight %}
58+
{% endtabs %}
59+
60+
## Add Area Annotation
61+
62+
### Add Area Using the Toolbar
63+
64+
1. Open the **Annotation Toolbar**.
65+
2. Select **Measurement** → **Area**.
66+
3. Click points to define the polygon; double‑click to close and finalize the area.
67+
68+
![Measurement toolbar](../../images/calibrate_tool.png)
69+
70+
> **Tip:** If Pan mode is active, choosing a measurement tool switches the viewer into the appropriate interaction mode for a smoother workflow.
71+
72+
### Enable Area Mode
73+
Programmatically switch the viewer into Area mode.
74+
75+
{% tabs %}
76+
{% highlight ts tabtitle="Standalone" %}
77+
enableAreaMode(): void {
78+
const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
79+
pdfViewer.annotationModule.setAnnotationMode('Area');
80+
}
81+
{% endhighlight %}
82+
{% endtabs %}
83+
84+
#### Exit Area Mode
85+
{% tabs %}
86+
{% highlight ts tabtitle="Standalone" %}
87+
exitAreaMode(): void {
88+
const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
89+
pdfViewer.annotationModule.setAnnotationMode('None');
90+
}
91+
{% endhighlight %}
92+
{% endtabs %}
93+
94+
### Add Area Programmatically
95+
Use the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API to draw an area by providing **vertexPoints** for a closed region.
96+
97+
{% tabs %}
98+
{% highlight ts tabtitle="Standalone" %}
99+
addArea(): void {
100+
const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
101+
102+
pdfViewer.annotation.addAnnotation('Area', {
103+
offset: { x: 200, y: 500 },
104+
pageNumber: 1,
105+
vertexPoints: [
106+
{ x: 200, y: 500 },
107+
{ x: 288, y: 499 },
108+
{ x: 289, y: 553 },
109+
{ x: 200, y: 500 }
110+
]
111+
});
112+
}
113+
{% endhighlight %}
114+
{% endtabs %}
115+
116+
## Customize Area Appearance
117+
Configure default properties using the [`Area Settings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#areasettings) property (for example, default **fill color**, **stroke color**, **opacity**).
118+
119+
{% tabs %}
120+
{% highlight ts tabtitle="Standalone" %}
121+
import { Component } from '@angular/core';
122+
import {
123+
PdfViewerModule,
124+
ToolbarService,
125+
AnnotationService
126+
} from '@syncfusion/ej2-angular-pdfviewer';
127+
128+
@Component({
129+
selector: 'app-root',
130+
template: `
131+
<div class="content-wrapper">
132+
<ejs-pdfviewer
133+
id="pdfViewer"
134+
[documentPath]="document"
135+
[resourceUrl]="resource"
136+
[areaSettings]="areaSettings"
137+
style="height:650px;display:block">
138+
</ejs-pdfviewer>
139+
</div>
140+
`,
141+
imports: [PdfViewerModule],
142+
providers: [ToolbarService, AnnotationService]
143+
})
144+
export class AppComponent {
145+
146+
public document: string =
147+
'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
148+
149+
public resource: string =
150+
'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
151+
152+
// Area annotation default settings
153+
public areaSettings = {
154+
fillColor: 'yellow',
155+
strokeColor: 'orange',
156+
opacity: 0.6
157+
};
158+
}
159+
``
160+
{% endhighlight %}
161+
{% endtabs %}
162+
163+
## Manage Area (Move, Reshape, Edit, Delete)
164+
- **Move**: Drag inside the polygon to reposition it.
165+
- **Reshape**: Drag any vertex handle to adjust points and shape.
166+
167+
### Edit Perimeter
168+
169+
#### Edit Perimeter (UI)
170+
171+
- Edit the **fill color** using the Edit Color tool.
172+
![Fill color](../../images/calibrate_fillcolor.png)
173+
- Edit the **stroke color** using the Edit Stroke Color tool.
174+
![Stroke color](../../images/calibrate_stroke.png)
175+
- Edit the **border thickness** using the Edit Thickness tool.
176+
![Thickness](../../images/calibrate_thickness.png)
177+
- Edit the **opacity** using the Edit Opacity tool.
178+
![Opacity](../../images/calibrate_opacity.png)
179+
- Open **Right Click → Properties** for additional line‑based options.
180+
![Line properties](../../images/calibrate_lineprop.png)
181+
182+
#### Edit Area Programmatically
183+
184+
Update properties and call `editAnnotation()`.
185+
186+
{% tabs %}
187+
{% highlight ts tabtitle="Standalone" %}
188+
editAreaProgrammatically(): void {
189+
const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
190+
191+
for (const annotation of pdfViewer.annotationCollection) {
192+
if (annotation.subject === 'Area calculation') {
193+
annotation.strokeColor = '#0000FF';
194+
annotation.thickness = 2;
195+
annotation.fillColor = '#FFFF00';
196+
197+
pdfViewer.annotation.editAnnotation(annotation);
198+
break;
199+
}
200+
}
201+
}
202+
{% endhighlight %}
203+
{% endtabs %}
204+
205+
### Delete Distance Annotation
206+
207+
Delete Distance Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
208+
209+
## Set Default Properties During Initialization
210+
Apply defaults for Area using the [`areaSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#areasettings) property.
211+
212+
{% tabs %}
213+
{% highlight ts tabtitle="Standalone" %}
214+
import { Component } from '@angular/core';
215+
import {
216+
PdfViewerModule,
217+
ToolbarService,
218+
AnnotationService
219+
} from '@syncfusion/ej2-angular-pdfviewer';
220+
221+
@Component({
222+
selector: 'app-root',
223+
template: `
224+
<div class="content-wrapper">
225+
<ejs-pdfviewer
226+
id="pdfViewer"
227+
[documentPath]="document"
228+
[resourceUrl]="resource"
229+
[areaSettings]="areaSettings"
230+
style="height:650px;display:block">
231+
</ejs-pdfviewer>
232+
</div>
233+
`,
234+
imports: [PdfViewerModule],
235+
providers: [ToolbarService, AnnotationService]
236+
})
237+
export class AppComponent {
238+
239+
public document: string =
240+
'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
241+
242+
public resource: string =
243+
'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
244+
245+
// Area annotation default settings
246+
public areaSettings = {
247+
fillColor: 'yellow',
248+
strokeColor: 'orange',
249+
opacity: 0.6
250+
};
251+
}
252+
{% endhighlight %}
253+
{% endtabs %}
254+
255+
## Set Properties While Adding Individual Annotation
256+
Pass per‑annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation).
257+
258+
{% tabs %}
259+
{% highlight ts tabtitle="Standalone" %}
260+
addStyledArea(): void {
261+
const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
262+
263+
pdfViewer.annotation.addAnnotation('Area', {
264+
offset: { x: 210, y: 510 },
265+
pageNumber: 1,
266+
vertexPoints: [
267+
{ x: 210, y: 510 },
268+
{ x: 300, y: 510 },
269+
{ x: 305, y: 560 },
270+
{ x: 210, y: 510 }
271+
],
272+
strokeColor: '#EA580C',
273+
fillColor: '#FEF3C7',
274+
thickness: 2,
275+
opacity: 0.85
276+
});
277+
}
278+
{% endhighlight %}
279+
{% endtabs %}
280+
281+
## Scale Ratio and Units
282+
- Use **Scale Ratio** from the context menu to set the actual‑to‑page scale.
283+
![Scale ratio](../../images/calibrate_scaleratio.png)
284+
- Supported units include **Inch, Millimeter, Centimeter, Point, Pica, Feet**.
285+
![Scale dialog](../../images/calibrate_scaledialog.png)
286+
287+
### Set Default Scale Ratio During Initialization
288+
Configure scale defaults using [`measurementSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#mesaurementsettings).
289+
290+
{% tabs %}
291+
{% highlight ts tabtitle="Standalone" %}
292+
import { Component } from '@angular/core';
293+
import {
294+
PdfViewerModule,
295+
ToolbarService,
296+
AnnotationService
297+
} from '@syncfusion/ej2-angular-pdfviewer';
298+
299+
@Component({
300+
selector: 'app-root',
301+
template: `
302+
<div class="content-wrapper">
303+
<ejs-pdfviewer
304+
id="pdfViewer"
305+
[documentPath]="document"
306+
[resourceUrl]="resource"
307+
[measurementSettings]="measurementSettings"
308+
style="height:640px;display:block">
309+
</ejs-pdfviewer>
310+
</div>
311+
`,
312+
imports: [PdfViewerModule],
313+
providers: [ToolbarService, AnnotationService]
314+
})
315+
export class AppComponent {
316+
317+
public document: string =
318+
'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
319+
320+
public resource: string =
321+
'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
322+
323+
// Area / Measurement configuration
324+
public measurementSettings = {
325+
scaleRatio: 2,
326+
conversionUnit: 'cm',
327+
displayUnit: 'cm'
328+
};
329+
}
330+
331+
{% endhighlight %}
332+
{% endtabs %}
333+
334+
## Handle Area Events
335+
336+
Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see [**Annotation Events**](../annotation-event).
337+
338+
## Export and Import
339+
Area measurements can be exported or imported with other annotations. For workflows and supported formats, see [**Export and Import annotations**](../export-import-annotations).
340+
341+
## See Also
342+
- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
343+
- [Customize Context Menu](../../context-menu/custom-context-menu)
344+
- [Comments Panel](../comments)
345+
- [Annotation Events](../annotation-event)
346+
- [Export and Import annotations](../export-import-annotations)
347+
- [Delete Annotations](../remove-annotations)

0 commit comments

Comments
 (0)