Skip to content

Commit 414760f

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1010724: Stamp and Other Annotations using Diataxis
1 parent 28f054a commit 414760f

5 files changed

Lines changed: 1017 additions & 0 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -971,6 +971,10 @@
971971
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/underline-annotation">Underline</a></li>
972972
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/strikethrough-annotation">Strikethrough</a></li>
973973
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/squiggly-annotation">Squiggly</a></li>
974+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/stamp-annotation">Stamp</a></li>
975+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/ink-annotation">Ink</a></li>
976+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/free-text-annotation">Free Text</a></li>
977+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/distance-annotation">Distance</a></li>
974978
</ul>
975979
</li>
976980
<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/distance-annotation.md‎

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

0 commit comments

Comments
 (0)