Skip to content

Commit 74a7199

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
996394: Line and Perimeter Annotation Updates
1 parent c2cfd03 commit 74a7199

8 files changed

Lines changed: 571 additions & 0 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-images/line-annot.png‎

47.7 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-images/perimeter-annot.png‎

47.7 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/line-annotation.md‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
---
2+
layout: post
3+
title: Line annotation in TypeScript PDF Viewer | Syncfusion
4+
description: Learn to add, edit, and customize Line annotations in Syncfusion TypeScript PDF Viewer with UI and programmatic examples.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Line annotation in TypeScript PDF Viewer
12+
13+
Line is a shape annotation used to mark straight connections or callouts. Common use cases include underline-like rulers, connectors, and measurement guides.
14+
15+
![Line annotations overview](../annotation-images/line-annot.png)
16+
17+
## Add Line Annotation
18+
19+
### Add line annotation via UI
20+
21+
Use the annotation toolbar:
22+
- Click the **Edit Annotation** button in the PDF Viewer toolbar.
23+
- Open the **Shape Annotation** dropdown.
24+
- Choose **Line**, then draw on the page.
25+
26+
N> When in pan mode, selecting a shape annotation switches the viewer to text select mode.
27+
28+
![Shape toolbar](../annotation-images/line-annot.png)
29+
30+
### Add a line annotation programmatically
31+
32+
#### Enable line mode
33+
34+
The PDF Viewer component allows to add line annotations programmatically after enabling line mode in button clicks.
35+
36+
```html
37+
<button id="lineMode">Line</button>
38+
```
39+
40+
{% tabs %}
41+
{% highlight ts tabtitle="Standalone" %}
42+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
43+
44+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
45+
46+
let pdfviewer: PdfViewer = new PdfViewer();
47+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
48+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
49+
pdfviewer.appendTo('#PdfViewer');
50+
51+
document.getElementById('lineMode')?.addEventListener('click', () => {
52+
pdfviewer.annotationModule.setAnnotationMode('Line');
53+
});
54+
{% endhighlight %}
55+
{% highlight ts tabtitle="Server-Backed" %}
56+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
57+
58+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
59+
60+
let pdfviewer: PdfViewer = new PdfViewer();
61+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
62+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
63+
pdfviewer.appendTo('#PdfViewer');
64+
65+
document.getElementById('lineMode')?.addEventListener('click', () => {
66+
pdfviewer.annotationModule.setAnnotationMode('Line');
67+
});
68+
{% endhighlight %}
69+
{% endtabs %}
70+
71+
#### Exit line mode
72+
73+
```html
74+
<button id="setNone">Normal Mode</button>
75+
```
76+
77+
{% tabs %}
78+
{% highlight ts tabtitle="Common" %}
79+
document.getElementById('setNone')?.addEventListener('click', () => {
80+
pdfviewer.annotationModule.setAnnotationMode('None');
81+
});
82+
{% endhighlight %}
83+
{% endtabs %}
84+
85+
#### Add Line Annotation
86+
87+
Use the addAnnotation method with Line settings.
88+
89+
```html
90+
<button id="addLineAnnotation">Add Line annotation programmatically</button>
91+
```
92+
93+
{% tabs %}
94+
{% highlight ts tabtitle="Standalone" %}
95+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, LineSettings } from '@syncfusion/ej2-pdfviewer';
96+
97+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
98+
99+
let pdfviewer: PdfViewer = new PdfViewer();
100+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
101+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
102+
pdfviewer.appendTo('#PdfViewer');
103+
104+
document.getElementById('addLineAnnotation')?.addEventListener('click', () => {
105+
pdfviewer.annotation.addAnnotation('Line', {
106+
offset: { x: 200, y: 230 },
107+
pageNumber: 1,
108+
vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]
109+
} as LineSettings);
110+
});
111+
{% endhighlight %}
112+
{% highlight ts tabtitle="Server-Backed" %}
113+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, LineSettings } from '@syncfusion/ej2-pdfviewer';
114+
115+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
116+
117+
let pdfviewer: PdfViewer = new PdfViewer();
118+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
119+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
120+
pdfviewer.appendTo('#PdfViewer');
121+
122+
document.getElementById('addLineAnnotation')?.addEventListener('click', () => {
123+
pdfviewer.annotation.addAnnotation('Line', {
124+
offset: { x: 200, y: 230 },
125+
pageNumber: 1,
126+
vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]
127+
} as LineSettings);
128+
});
129+
{% endhighlight %}
130+
{% endtabs %}
131+
132+
## Edit Line Annotation
133+
134+
### Edit Line Annotation in UI
135+
136+
You can select, move, and resize Line annotations directly in the viewer:
137+
- Select a Line to show its end-point handles.
138+
- Move: drag the line to reposition it on the page.
139+
- Resize/reshape: drag either end-point to adjust the line.
140+
- Delete or access more options from the context menu.
141+
142+
Use the toolbar to change appearance:
143+
- Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools.
144+
145+
![Shape tools](../../images/shape_toolbar.png)
146+
147+
### Editing the properties of the shape annotation
148+
149+
The fill color, stroke color, thickness, and opacity of shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
150+
151+
#### Editing fill color
152+
153+
The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
154+
155+
![Edit fill color for shapes](../../images/shape_fillColor.png)
156+
157+
#### Editing stroke color
158+
159+
The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
160+
161+
![Edit stroke color for shapes](../../images/shape_strokecolor.png)
162+
163+
#### Editing thickness
164+
165+
The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
166+
167+
![Edit thickness for shapes](../../images/shape_thickness.png)
168+
169+
#### Editing opacity
170+
171+
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
172+
173+
![Edit opacity for shapes](../../images/shape_opacity.png)
174+
175+
#### Editing the line properties
176+
177+
Line annotations have additional options in the Line Properties window. Open it by right-clicking a line or arrow annotation and selecting Properties from the context menu.
178+
179+
![Line properties dialog](../../images/shape_lineprty.png)
180+
181+
### Edit an existing line annotation programmatically
182+
183+
To modify an existing line annotation programmatically, use the editAnnotation() method.
184+
185+
Here is an example of using editAnnotation():
186+
187+
```html
188+
<button id="editLineAnnotation">Edit Line annotation programmatically</button>
189+
```
190+
191+
{% tabs %}
192+
{% highlight ts tabtitle="Standalone" %}
193+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
194+
195+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
196+
197+
let pdfviewer: PdfViewer = new PdfViewer();
198+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
199+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
200+
pdfviewer.appendTo('#PdfViewer');
201+
202+
document.getElementById('editLineAnnotation')?.addEventListener('click', () => {
203+
for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
204+
if (pdfviewer.annotationCollection[i].subject === 'Line') {
205+
pdfviewer.annotationCollection[i].strokeColor = '#0000FF';
206+
pdfviewer.annotationCollection[i].thickness = 2;
207+
pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = 'Circle';
208+
pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
209+
}
210+
}
211+
});
212+
{% endhighlight %}
213+
{% highlight ts tabtitle="Server-Backed" %}
214+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
215+
216+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
217+
218+
let pdfviewer: PdfViewer = new PdfViewer();
219+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
220+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
221+
pdfviewer.appendTo('#PdfViewer');
222+
223+
document.getElementById('editLineAnnotation')?.addEventListener('click', () => {
224+
for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
225+
if (pdfviewer.annotationCollection[i].subject === 'Line') {
226+
pdfviewer.annotationCollection[i].strokeColor = '#0000FF';
227+
pdfviewer.annotationCollection[i].thickness = 2;
228+
pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = 'Circle';
229+
pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
230+
}
231+
}
232+
});
233+
{% endhighlight %}
234+
{% endtabs %}
235+
236+
## Default line settings during initialization
237+
238+
Set default properties before creating the control using lineSettings.
239+
240+
{% tabs %}
241+
{% highlight ts tabtitle="Standalone" %}
242+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
243+
244+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
245+
246+
let pdfviewer: PdfViewer = new PdfViewer();
247+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
248+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
249+
pdfviewer.lineSettings = { fillColor: 'blue', opacity: 0.6, strokeColor: 'green' };
250+
pdfviewer.appendTo('#PdfViewer');
251+
{% endhighlight %}
252+
{% highlight ts tabtitle="Server-Backed" %}
253+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
254+
255+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
256+
257+
let pdfviewer: PdfViewer = new PdfViewer();
258+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
259+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
260+
pdfviewer.lineSettings = { fillColor: 'blue', opacity: 0.6, strokeColor: 'green' };
261+
pdfviewer.appendTo('#PdfViewer');
262+
{% endhighlight %}
263+
{% endtabs %}
264+
265+
N> In both [Arrow](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#arrowsettings) and [Line](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#linesettings) annotations Settings, the Fill Color option is available only when an arrowhead style is applied at the Start or End. If both Start and End arrowhead styles are set to None, lines do not support fill rendering and the Fill Color option remains disabled.

0 commit comments

Comments
 (0)