Skip to content

Commit ae6e705

Browse files
SaravanaPriya31SaravanaPriya31
SaravanaPriya31
authored and
SaravanaPriya31
committed
880498: commit
1 parent c4d1b6a commit ae6e705

15 files changed

+2824
-235
lines changed

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

Lines changed: 158 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ publishingplatform: ej2-asp-core-mvc
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: 139 additions & 25 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)