Skip to content

Commit bd3fb66

Browse files
johnsonmonoharjohnsonmonohar
authored
Merge pull request #2916 from syncfusion-content/880498-annotation
880498: How to add and edit annotation programmatically
2 parents 4001b81 + b0ad95a commit bd3fb66

16 files changed

+2847
-258
lines changed

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/comments.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
3-
title: Comments in ##Platform_Name## Pdfviewer Component
4-
description: Learn here all about Comments in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more.
3+
title: Comments in ##Platform_Name## PDF Viewer Component | Syncfusion
4+
description: Learn here all about Comments in Syncfusion ##Platform_Name## PDF Viewer component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Comments
77
publishingplatform: ##Platform_Name##

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/free-text-annotation.md

Lines changed: 159 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@ title: Free Text Annotation in EJ2 ASP.NET MVC PDF Viewer | Syncfusion
44
description: Learn here all about Free Text Annotation in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Free Text Annotation
7-
publishingplatform: ej2-asp-core-mvc
7+
publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

11-
1211
# Free Text Annotation in the ASP.NET MVC PDF Viewer component
1312

1413
The PDF Viewer control provides the options to add, edit, and delete the free text annotations.
@@ -30,36 +29,163 @@ Refer to the following code sample to switch to the Free Text annotation mode.
3029
{% tabs %}
3130
{% highlight html tabtitle="Standalone" %}
3231

33-
```html
34-
<!--Element to set free text annotation mode-->
35-
<button id="set" onclick="addAnnot()">FreeText</button>
36-
<div style="width:100%;height:600px">
37-
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
38-
</div>
39-
<script>
40-
function addAnnot() {
41-
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
42-
pdfViewer.annotation.setAnnotationMode('FreeText');
43-
}
44-
</script>
45-
```
32+
33+
<!--Element to set free text annotation mode-->
34+
<button id="set" onclick="addAnnot()">FreeText</button>
35+
<div style="width:100%;height:600px">
36+
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
37+
</div>
38+
<script>
39+
function addAnnot() {
40+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
41+
pdfViewer.annotation.setAnnotationMode('FreeText');
42+
}
43+
</script>
44+
45+
{% endhighlight %}
46+
47+
{% highlight html tabtitle="Server-Backed" %}
48+
49+
<!--Element to set free text annotation mode-->
50+
<button id="set" onclick="addAnnot()">FreeText</button>
51+
<div style="width:100%;height:600px">
52+
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
53+
</div>
54+
<script>
55+
function addAnnot() {
56+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
57+
pdfViewer.annotation.setAnnotationMode('FreeText');
58+
}
59+
</script>
60+
61+
{% endhighlight %}
62+
{% endtabs %}
63+
64+
## Adding a free text annotation programmatically to the PDF document
65+
66+
The PDF Viewer library allows you to add the free text annotation in the PDF Viewer control programmatically using the **addAnnotation()** method.
67+
68+
Here is an example of how you can use the **addAnnotation()** method to move the free text annotation programmatically:
69+
70+
{% tabs %}
71+
{% highlight html tabtitle="Standalone" %}
72+
73+
<button id="set" onclick="addAnnotation()">Add annotation programmatically</button>
74+
75+
<div style="width:100%;height:600px">
76+
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
77+
</div>
78+
79+
<script>
80+
function addAnnotation() {
81+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
82+
pdfViewer.annotation.addAnnotation("FreeText", {
83+
offset: { x: 100, y: 150 },
84+
fontSize: 16,
85+
fontFamily: "Helvetica",
86+
pageNumber: 1,
87+
width: 200,
88+
height: 40,
89+
isLock: false,
90+
textAlignment: 'Center',
91+
borderStyle: 'solid',
92+
borderWidth: 2,
93+
borderColor: 'red',
94+
fillColor: 'blue',
95+
fontColor: 'white',
96+
defaultText: "Syncfusion"
97+
});
98+
}
99+
</script>
100+
101+
{% endhighlight %}
102+
{% highlight html tabtitle="Server-Backed" %}
103+
104+
<button id="set" onclick="addAnnotation()">Add annotation programmatically</button>
105+
106+
<div style="width:100%;height:600px">
107+
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
108+
</div>
109+
110+
<script>
111+
function addAnnotation() {
112+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
113+
pdfViewer.annotation.addAnnotation("FreeText", {
114+
offset: { x: 100, y: 150 },
115+
fontSize: 16,
116+
fontFamily: "Helvetica",
117+
pageNumber: 1,
118+
width: 200,
119+
height: 40,
120+
isLock: false,
121+
textAlignment: 'Center',
122+
borderStyle: 'solid',
123+
borderWidth: 2,
124+
borderColor: 'red',
125+
fillColor: 'blue',
126+
fontColor: 'white',
127+
defaultText: "Syncfusion"
128+
});
129+
}
130+
</script>
131+
46132
{% endhighlight %}
133+
{% endtabs %}
134+
135+
## Change the content of an existing Free text annotation programmatically
136+
137+
To change the content of an existing free text annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
138+
139+
Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation:
140+
141+
{% tabs %}
142+
{% highlight html tabtitle="Standalone" %}
143+
144+
<button id="set" onclick="editAnnotation()">Edit annotation programmatically</button>
145+
146+
<div style="width:100%;height:600px">
147+
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
148+
</div>
149+
150+
<script>
151+
function editAnnotation() {
152+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
153+
for (let i = 0; i < viewer.annotationCollection.length; i++) {
154+
if (viewer.annotationCollection[i].subject === "Text Box") {
155+
var width = viewer.annotationCollection[i].bounds.width;
156+
var height = viewer.annotationCollection[i].bounds.height;
157+
viewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height };
158+
viewer.annotationCollection[i].dynamicText = 'syncfusion';
159+
viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
160+
}
161+
}
162+
}
163+
</script>
47164

165+
{% endhighlight %}
48166
{% highlight html tabtitle="Server-Backed" %}
49167

50-
```html
51-
<!--Element to set free text annotation mode-->
52-
<button id="set" onclick="addAnnot()">FreeText</button>
53-
<div style="width:100%;height:600px">
54-
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
55-
</div>
56-
<script>
57-
function addAnnot() {
58-
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
59-
pdfViewer.annotation.setAnnotationMode('FreeText');
168+
<button id="set" onclick="editAnnotation()">Edit annotation programmatically</button>
169+
170+
<div style="width:100%;height:600px">
171+
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
172+
</div>
173+
174+
<script>
175+
function editAnnotation() {
176+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
177+
for (let i = 0; i < viewer.annotationCollection.length; i++) {
178+
if (viewer.annotationCollection[i].subject === "Text Box") {
179+
var width = viewer.annotationCollection[i].bounds.width;
180+
var height = viewer.annotationCollection[i].bounds.height;
181+
viewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height };
182+
viewer.annotationCollection[i].dynamicText = 'syncfusion';
183+
viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
184+
}
60185
}
61-
</script>
62-
```
186+
}
187+
</script>
188+
63189
{% endhighlight %}
64190
{% endtabs %}
65191

@@ -131,37 +257,35 @@ Refer to the following code sample to set the default free text annotation setti
131257
{% tabs %}
132258
{% highlight html tabtitle="Standalone" %}
133259

134-
```html
135260
<div style="width:100%;height:600px">
136261
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { FillColor = "green", BorderColor = "blue", FontColor = "yellow" }).Render()
137262
</div>
138-
```
263+
139264
{% endhighlight %}
140265
{% highlight html tabtitle="Server-Backed" %}
141266

142-
```html
143267
<div style="width:100%;height:600px">
144268
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { FillColor = "green", BorderColor = "blue", FontColor = "yellow" }).Render()
145269
</div>
146-
```
270+
147271
{% endhighlight %}
148272
{% endtabs %}
149273

150274
You can also enable the autofit support for free text annotation by using the EnableAutoFit boolean property in FreeTextSettings as below. The width of the free text rectangle box will be increased based on the text added to it.
151275

152276
{% tabs %}
153277
{% highlight html tabtitle="Standalone" %}
154-
```html
278+
155279
<div style="width:100%;height:600px">
156280
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { EnableAutoFit = true }).Render()
157281
</div>
158-
```
282+
159283
{% endhighlight %}
160284
{% highlight html tabtitle="Server-Backed" %}
161-
```html
285+
162286
<div style="width:100%;height:600px">
163287
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { EnableAutoFit = true }).Render()
164288
</div>
165-
```
289+
166290
{% endhighlight %}
167291
{% endtabs %}

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/ink-annotation.md

Lines changed: 141 additions & 27 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)