diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md index 53c4cf5ecc..d6e2e04fdf 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md @@ -23,7 +23,7 @@ Imagine reviewing a PDF document with feedback from 5 team members, resulting in Comment filtering is most useful in these scenarios: - **Team reviews**: Filter annotations by author to see feedback from specific reviewers -- **Status tracking**: Filter by status (Accepted, Rejected, Canceled) to track document workflow progress +- **Status tracking**: Filter by status (Accepted, Rejected, Cancelled) to track document workflow progress - **Color-coded reviews**: Filter by annotation color to organize feedback by priority or type - **Time-based review**: Filter by modification date to see recent changes - **Document collaboration**: Use "Filter document and comments panel" to synchronize your view with the document @@ -36,8 +36,8 @@ The JavaScript PDF Viewer provides a comment filter dialog in the comments panel ### Filter options - **Author**: Filter annotations by the author who created them. Use the "Include replies" checkbox to also include comments where the author has replied to other annotations. -- **Annotation Type**: Filter by specific annotation types such as Highlight, Underline, Strikethrough, Text Box, Sticky Notes, and more. -- **Status**: Filter annotations by their status (e.g., Accepted, Rejected, Canceled, Completed, None). +- **Annotation Type**: Filter by specific annotation types such as Highlight, Underline, Strikethrough, Free Text, Sticky Notes, and more. +- **Status**: Filter annotations by their status (e.g., Accepted, Rejected, Cancelled, Completed, None). - **Date**: Filter annotations by their modification date. - **Color**: Filter annotations by their color. @@ -63,7 +63,7 @@ Follow these steps to filter annotations by their type and status: 1. Click the **filter icon** in the comments panel toolbar 2. In the **Annotation Type** dropdown, select the annotation types you want to view (e.g., Highlight, Underline) -3. In the **Status** dropdown, select the status you want to filter by (e.g., Accepted, Rejected, Pending) +3. In the **Status** dropdown, select the status you want to filter by (e.g., Accepted, Rejected, Completed) 4. Click **APPLY** to see only annotations matching your criteria 5. Use the **CLEAR** button to reset all filters @@ -128,7 +128,6 @@ This approach is useful when you want to: Use the `applyCommentFilter` method to apply filters with specific criteria: - ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md index fc1f3ff1bc..22e897ce0b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md @@ -1,5 +1,5 @@ --- -title: Annotations Events in JavaScript PDF Viewer control | Syncfusion +title: Annotation Events in JavaScript PDF Viewer control | Syncfusion description: Learn here all about Annotations Events in Syncfusion JavaScript PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-permission.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-permission.md index cfec1cb860..1ea2d98396 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-permission.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-permission.md @@ -121,7 +121,7 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({ pdfviewer.appendTo('#PdfViewer'); ``` -Behavior notes +### Behavior notes - isLock true: The annotation is locked; users cannot move, resize, or edit it through the UI until it is unlocked. - skipPrint true: All annotations are omitted from the print output initiated from the viewer. - skipDownload true: All annotations are omitted from the exported/downloaded PDF from the viewer. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/area-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/area-annotation.md index 36b76702f2..238e85d926 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/area-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/area-annotation.md @@ -18,10 +18,11 @@ Area is a measurement annotation used to measure the surface of a closed region ### Add area annotation via UI -- Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Click the **Measurement Annotation** dropdown. -- Choose **Area**, then draw the region on the page. +Use the annotation toolbar to add an area annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Click the **Measurement Annotation** dropdown. +3. Choose **Area**, then draw the region on the page. N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode. @@ -348,11 +349,11 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `AreaSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default Area settings. +Refer to the following code snippet to set the properties while adding an Area annotation. ```html @@ -447,7 +448,7 @@ Supported units for measurement annotations are ## Setting default scale ratio settings during control initialization -The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet, +The properties of scale ratio for measurement annotation can be set before creating the control using `measurementSettings` as shown in the following code snippet, {% tabs %} {% highlight js tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/arrow-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/arrow-annotation.md index a030fc3f89..62375a77b5 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/arrow-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/arrow-annotation.md @@ -18,10 +18,11 @@ Arrow is a shape annotation used to point, direct attention, or indicate flow. C ### Add arrow annotation via UI -Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Open the **Shape Annotation** dropdown. -- Choose **Arrow**, then draw on the page. +Use the annotation toolbar to add an arrow annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Arrow**, then draw on the page. N> When in pan mode, selecting a shape annotation switches the viewer to text select mode. @@ -171,7 +172,7 @@ You can select, move, and resize Arrow annotations directly in the viewer: The fill color, stroke color, thickness, and opacity of arrow shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. -##### Editing fill color +#### Editing fill color The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. @@ -335,11 +336,11 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `ArrowSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default arrow settings. +Refer to the following code snippet to set the properties while adding an arrow annotation. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/circle-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/circle-annotation.md index e6a32dccc2..c53ec3492f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/circle-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/circle-annotation.md @@ -18,10 +18,11 @@ Circle is a shape annotation used to highlight circular regions or draw emphasis ### Add circle annotation via UI -Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Open the **Shape Annotation** dropdown. -- Choose **Circle**, then draw on the page. +Use the annotation toolbar to add a circle annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Circle**, then draw on the page. N> When in pan mode, selecting a shape annotation switches the viewer to text select mode. @@ -216,7 +217,9 @@ The opacity of the annotation can be edited using the range slider provided in t ### Edit an existing circle annotation programmatically -Use editAnnotation on items from annotationCollection. +To modify an existing circle annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -350,17 +353,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `CircleSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default Circle settings. +Refer to the following code snippet to set the properties while adding a Circle annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -389,12 +392,12 @@ document.getElementById('Circle')?.addEventListener('click', function () { height: 75, opacity: 0.5, strokeColor: '#FF0000', - fillColor: '#000fff#', + fillColor: '#000fff', author: 'User1' }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -423,7 +426,7 @@ document.getElementById('Circle')?.addEventListener('click', function () { height: 75, opacity: 0.5, strokeColor: '#FF0000', - fillColor: '#000fff#', + fillColor: '#000fff', author: 'User1' }); }); diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/distance-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/distance-annotation.md index 91ce8d7d2f..8436490022 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/distance-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/distance-annotation.md @@ -18,10 +18,11 @@ Distance is a measurement annotation used to measure the length between two poin ### Add distance annotation via UI -Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Open the **Measurement Annotation** dropdown. -- Choose **Distance**, then draw on the page. +Use the annotation toolbar to add a distance annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Measurement Annotation** dropdown. +3. Choose **Distance**, then draw on the page. N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode. @@ -185,7 +186,7 @@ You can select, move, and resize Distance annotations directly in the viewer: The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. -##### Edit fill color +#### Edit fill color The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. @@ -211,7 +212,9 @@ The opacity of the annotation can be edited using the range slider provided in t ### Edit an existing distance annotation programmatically -Use editAnnotation on items from annotationCollection. +To modify an existing distance annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -337,17 +340,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `DistanceSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default Distance settings. +Refer to the following code snippet to set the properties while adding a Distance annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -377,7 +380,7 @@ document.getElementById('Distance')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/free-text-annotation.md index 53aad96fdd..88f534c813 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/free-text-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/free-text-annotation.md @@ -18,10 +18,11 @@ Free Text is a text box annotation used to place formatted text anywhere on the ### Add Free Text annotation via UI -Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Click the **Free Text Annotation** button to enable Free Text mode. -- Click on the page to add text. +Use the annotation toolbar to add a Free Text annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Click the **Free Text Annotation** button to enable Free Text mode. +3. Click on the page to add text. N> When in pan mode, selecting Free Text switches the viewer to text select mode. @@ -247,7 +248,9 @@ Edit opacity using the range slider in the Edit Opacity tool. ### Edit Free Text annotation programmatically -Use editAnnotation to update existing Free Text content. +To modify an existing Free Text annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -317,10 +320,6 @@ document.getElementById('changeContent').addEventListener('click', function () { {% endhighlight %} {% endtabs %} - - - - ## Default Free Text settings during initialization Set default Free Text properties before creating the control using freeTextSettings. @@ -374,17 +373,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `FreeTextSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default FreeText settings. +Refer to the following code snippet to set the properties while adding a FreeText annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -421,7 +420,7 @@ document.getElementById('FreeText')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/highlight-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/highlight-annotation.md index a16dda9b56..a8541538e6 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/highlight-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/highlight-annotation.md @@ -27,10 +27,11 @@ Add highlights in two ways: ![Alt text](../../../javascript-es6/annotations/annotation-images/highlight-context.gif) 2. Using the annotation toolbar -Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. -- Select **Highlight** to enable highlight mode. -- Select text to add the highlight annotation, or select text first and then click **Highlight**. +Use the annotation toolbar to add a highlight annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +2. Select **Highlight** to enable highlight mode. +3. Select text to add the highlight annotation, or select text first and then click **Highlight**. ![Alt text](../../../javascript-es6/annotations/annotation-images/highlight-tool.gif) @@ -70,7 +71,7 @@ document.getElementById('set').addEventListener('click', function () { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, add the below `serviceUrl` in the `index.ts` file: `pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` +N> To set up the **server-backed PDF Viewer**, add the below `serviceUrl` in the `index.js` file: `pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/highlight-mode-cs1" %} @@ -112,7 +113,7 @@ document.getElementById('setNone').addEventListener('click', function () { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, add the below `serviceUrl` in the `index.ts` file: +N> To set up the **server-backed PDF Viewer**, add the below `serviceUrl` in the `index.js` file: `pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/highlight-normal-mode-cs1" %} @@ -336,17 +337,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `highlightSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default highlight settings. +Refer to the following code snippet to set the properties while adding a Highlight annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -385,7 +386,7 @@ document.getElementById('highlight')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/ink-annotation.md index 93c8926fec..aa74175838 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/ink-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/ink-annotation.md @@ -18,10 +18,11 @@ Ink is a freehand drawing annotation used to sketch, sign, or mark up content. ### Add ink annotation via UI -Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Click the **Draw Ink** button to enable ink mode. -- Draw on any page of the PDF document. +Use the annotation toolbar to add an ink annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Click the **Draw Ink** button to enable ink mode. +3. Draw on any page of the PDF document. ![Ink tool in the annotation toolbar](../../images/ink_tool.png) @@ -80,7 +81,7 @@ if (setNone) { ### Add ink annotation programmatically -Use addAnnotation to programmatically create an Ink annotation. +The PDF Viewer library allows adding ink annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. ```html @@ -187,7 +188,9 @@ Edit opacity using the range slider in the Edit Opacity tool. ### Edit an existing ink annotation programmatically -Use editAnnotation to modify properties and bounds of an existing ink annotation. +To modify an existing ink annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -323,17 +326,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `InkSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default Ink settings. +Refer to the following code snippet to set the properties while adding an Ink annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -366,7 +369,7 @@ document.getElementById('Ink')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/line-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/line-annotation.md index 636bfa3f25..c222ca4b70 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/line-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/line-annotation.md @@ -18,10 +18,11 @@ Line is a shape annotation used to mark straight connections or callouts. Common ### Add line annotation via UI -Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Open the **Shape Annotation** dropdown. -- Choose **Line**, then draw on the page. +Use the annotation toolbar to add a line annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Line**, then draw on the page. N> When in pan mode, selecting a shape annotation switches the viewer to text select mode. @@ -104,7 +105,7 @@ document.getElementById('setNone').addEventListener('click', function() { ### Add a line annotation programmatically -Use the addAnnotation method with Line settings. +The PDF Viewer library allows adding shape annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. ```html @@ -352,17 +353,17 @@ N> In both [Arrow](https://ej2.syncfusion.com/documentation/api/pdfviewer/index- ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `lineSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default line settings. +Refer to the following code snippet to set the properties while adding a line annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -397,7 +398,7 @@ document.getElementById('line')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/perimeter-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/perimeter-annotation.md index f3f0297d00..bcc9c64e41 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/perimeter-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/perimeter-annotation.md @@ -18,10 +18,11 @@ Perimeter is a measurement annotation used to measure the length around a closed ### Add perimeter annotation via UI -Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Open the **Measurement Annotation** dropdown. -- Choose **Perimeter**, then draw the polyline on the page. +Use the annotation toolbar to add a perimeter annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Measurement Annotation** dropdown. +3. Choose **Perimeter**, then draw the polyline on the page. N> When in pan mode, selecting measurement annotations switches the viewer to text select mode. @@ -363,17 +364,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `PerimeterSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default Perimeter settings. +Refer to the following code snippet to set the properties while adding a Perimeter annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -404,8 +405,8 @@ document.getElementById('Perimeter')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -=ej.pdfviewer.PdfViewer.Inject( +{% highlight js tabtitle="Server-Backed" %} +ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, @@ -443,7 +444,7 @@ The scale ratio and unit of measurement can be modified using the scale ratio op ![Scale ratio](../../images/calibrate_scaleratio.png) -The Units of measurements support for the measurement annotations in the PDF Viewer are +Supported units for measurement annotations are - Inch - Millimeter diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/polygon-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/polygon-annotation.md index 469178bb38..8aba84da10 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/polygon-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/polygon-annotation.md @@ -18,10 +18,11 @@ Polygon is a shape annotation used to outline irregular regions, highlight areas ### Add polygon annotation via UI -Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Open the **Shape Annotation** dropdown. -- Choose **Polygon**, then draw on the page. +Use the annotation toolbar to add a polygon annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Polygon**, then draw on the page. N> When in pan mode, selecting shape annotations switches the viewer to text select mode. @@ -220,7 +221,9 @@ The opacity of the annotation can be edited using the range slider provided in t ### Edit an existing polygon annotation programmatically -Use editAnnotation on items from annotationCollection. +To modify an existing polygon annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -348,11 +351,11 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `PolygonSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default Polygon settings. +Refer to the following code snippet to set the properties while adding a Polygon annotation. ```html @@ -387,13 +390,13 @@ document.getElementById('Polygon')?.addEventListener('click', function () { vertexPoints: [ { x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 } ], - fillColor:'#ff000', + fillColor:'#ff0000', opacity: 0.9, - strokeColor:'##ff000' + strokeColor:'#ff0000' }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -422,9 +425,9 @@ document.getElementById('Polygon')?.addEventListener('click', function () { vertexPoints: [ { x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 } ], - fillColor:'#ff000', + fillColor:'#ff0000', opacity: 0.9, - strokeColor:'##ff000' + strokeColor:'#ff0000' }); }); {% endhighlight %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/radius-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/radius-annotation.md index 9322791d71..f01125d768 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/radius-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/radius-annotation.md @@ -104,7 +104,7 @@ document.getElementById('setNone').addEventListener('click', function() { ### Add a radius annotation programmatically -Add radius annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. +Add radius annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/rectangle-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/rectangle-annotation.md index cde1e1489c..8ec24d1b9e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/rectangle-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/rectangle-annotation.md @@ -390,14 +390,26 @@ document.getElementById('Rectangle')?.addEventListener('click', function () { }); {% endhighlight %} {% highlight js tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RectangleSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); -const pdfviewer: PdfViewer = new PdfViewer(); +var pdfviewer = new ej.pdfviewer.PdfViewer(); pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; pdfviewer.appendTo('#PdfViewer'); + //Apply Rectangle Settings while adding individual Annotation document.getElementById('Rectangle')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Rectangle', { @@ -409,7 +421,7 @@ document.getElementById('Rectangle')?.addEventListener('click', function () { strokeColor: '#FF0000', fillColor: '#000fff#', author: 'User1' - } as RectangleSettings); + }); }); {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/redaction-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/redaction-annotation.md index c755640a27..da5e35cbfc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/redaction-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/redaction-annotation.md @@ -43,27 +43,50 @@ Use the `addAnnotation` method with the Redaction type to add redaction annotati ``` ```js -document.getElementById('addRedactAnnot')?.addEventListener('click', () => { - viewer.annotation.addAnnotation('Redaction', { - bound: { x: 200, y: 480, width: 150, height: 75 }, - pageNumber: 1, - markerFillColor: '#0000FF', - markerBorderColor: 'white', - fillColor: 'red', - overlayText: 'Confidential', - fontColor: 'yellow', - fontFamily: 'Times New Roman', - fontSize: 8, - beforeRedactionsApplied: false - }); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var addRedactAnnot = document.getElementById('addRedactAnnot'); +if (addRedactAnnot) { + addRedactAnnot.addEventListener('click', function () { + pdfviewer.annotation.addAnnotation('Redaction', { + bound: { x: 200, y: 480, width: 150, height: 75 }, + pageNumber: 1, + markerFillColor: '#0000FF', + markerBorderColor: 'white', + fillColor: 'red', + overlayText: 'Confidential', + fontColor: 'yellow', + fontFamily: 'Times New Roman', + fontSize: 8, + beforeRedactionsApplied: false + }); + }); +} ``` Track additions using the annotationAdd event. ```js -viewer.annotationAdd = (args) => { - console.log('Annotation added:', args); +pdfviewer.annotationAdd = function (args) { + console.log('Annotation added:', args); }; ``` @@ -88,23 +111,46 @@ Use editAnnotation to modify overlay text, colors, fonts, etc. ``` ```js -document.getElementById('editRedactAnnotation')?.addEventListener('click', () => { - for (let i = 0; i < viewer.annotationCollection.length; i++) { - if (viewer.annotationCollection[i].subject === 'Redaction') { - viewer.annotationCollection[i].overlayText = 'EditedAnnotation'; - viewer.annotationCollection[i].markerFillColor = '#22FF00'; - viewer.annotationCollection[i].markerBorderColor = '#000000'; - viewer.annotationCollection[i].isRepeat = true; - viewer.annotationCollection[i].fillColor = '#F8F8F8'; - viewer.annotationCollection[i].fontColor = '#333333'; - viewer.annotationCollection[i].fontSize = 14; - viewer.annotationCollection[i].fontFamily = 'Symbol'; - viewer.annotationCollection[i].textAlign = 'Right'; - viewer.annotationCollection[i].beforeRedactionsApplied = false; - viewer.annotation.editAnnotation(viewer.annotationCollection[i]); - } - } -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var editRedactAnnotation = document.getElementById('editRedactAnnotation'); +if (editRedactAnnotation) { + editRedactAnnotation.addEventListener('click', function () { + for (var i = 0; i < pdfviewer.annotationCollection.length; i++) { + if (pdfviewer.annotationCollection[i].subject === 'Redaction') { + pdfviewer.annotationCollection[i].overlayText = 'EditedAnnotation'; + pdfviewer.annotationCollection[i].markerFillColor = '#22FF00'; + pdfviewer.annotationCollection[i].markerBorderColor = '#000000'; + pdfviewer.annotationCollection[i].isRepeat = true; + pdfviewer.annotationCollection[i].fillColor = '#F8F8F8'; + pdfviewer.annotationCollection[i].fontColor = '#333333'; + pdfviewer.annotationCollection[i].fontSize = 14; + pdfviewer.annotationCollection[i].fontFamily = 'Symbol'; + pdfviewer.annotationCollection[i].textAlign = 'Right'; + pdfviewer.annotationCollection[i].beforeRedactionsApplied = false; + pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); + } + } + }); +} ``` ## Delete redaction annotations @@ -125,9 +171,32 @@ Delete by id using deleteAnnotationById: ``` ```js -document.getElementById('deleteAnnotationbyId')?.addEventListener('click', () => { - viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var deleteAnnotationbyId = document.getElementById('deleteAnnotationbyId'); +if (deleteAnnotationbyId) { + deleteAnnotationbyId.addEventListener('click', function () { + pdfviewer.annotationModule.deleteAnnotationById(pdfviewer.annotationCollection[0].annotationId); + }); +} ``` ## Redact pages @@ -146,9 +215,32 @@ Options include Current Page, Odd Pages Only, Even Pages Only, and Specific Page ``` ```js -document.getElementById('addPageRedactions')?.addEventListener('click', () => { - viewer.annotation.addPageRedactions([1, 3, 5, 7]); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var addPageRedactions = document.getElementById('addPageRedactions'); +if (addPageRedactions) { + addPageRedactions.addEventListener('click', function () { + pdfviewer.annotation.addPageRedactions([1, 3, 5, 7]); + }); +} ``` ## Apply redaction @@ -168,9 +260,32 @@ N> Redaction is permanent and cannot be undone. ``` ```js -document.getElementById('redact')?.addEventListener('click', () => { - viewer.annotation.redact(); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var redact = document.getElementById('redact'); +if (redact) { + redact.addEventListener('click', function () { + pdfviewer.annotation.redact(); + }); +} ``` N> Applying redaction is irreversible. @@ -180,7 +295,27 @@ N> Applying redaction is irreversible. Configure defaults with redactionSettings: ```js -viewer.redactionSettings = { +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.redactionSettings = { overlayText: 'Confidential', markerFillColor: '#FF0000', markerBorderColor: '#000000', diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/stamp-annotation.md index a978f30342..0d515eb903 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/stamp-annotation.md @@ -96,6 +96,21 @@ document.getElementById('signStamp') && document.getElementById('signStamp').add document.getElementById('standardBusinessStamp') && document.getElementById('standardBusinessStamp').addEventListener('click', function () { pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, ej.pdfviewer.StandardBusinessStampItem.Approved); }); + +document.getElementById('customStamp') && document.getElementById('customStamp').addEventListener('click', function () { + pdfviewer.annotation.addAnnotation('Stamp', { + offset: { x: 100, y: 440 }, + width: 46, + height: 100, + pageNumber: 1, + isLock: true, + author: 'Guest', + customStamps: [{ + customStampName: 'Image', + customStampImageSource: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...' + }] + }); +}); {% endhighlight %} {% endtabs %} @@ -273,11 +288,9 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -[View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) - ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `StampSettings`. +Set properties for individual annotations before creating the control using `StampSettings`. > After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. @@ -313,7 +326,7 @@ document.getElementById('Stamp')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 140 }, pageNumber: 1, opacity: 0.3, author: 'Guest User' - } ,'Approved'); + }, ej.pdfviewer.DynamicStampItem.Approved); }); {% endhighlight %} {% highlight js tabtitle="Server-Backed" %} @@ -342,11 +355,13 @@ document.getElementById('Stamp')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 140 }, pageNumber: 1, opacity: 0.3, author: 'Guest User' - } ,'Approved'); + }, ej.pdfviewer.DynamicStampItem.Approved); }); {% endhighlight %} {% endtabs %} +[View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) + ## See also - [Annotation Overview](../overview) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/sticky-notes-annotation.md index d2a64aa1b4..838b53deb2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/sticky-notes-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/sticky-notes-annotation.md @@ -18,9 +18,9 @@ Sticky Notes are comment annotations used to leave notes, replies, and review st ### Add annotations in UI -Use the Comments tool to: +To add a sticky note annotation via the UI: - Click the Comments button in the PDF Viewer toolbar. -- Click on the page where the sticky note should be added. +- Click the page where the sticky note should be added. - The sticky note icon is placed at the clicked position. ![Sticky notes tool](../../images/stickynotes_tool.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/strikethrough-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/strikethrough-annotation.md index d346dadd9a..186966043a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/strikethrough-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/strikethrough-annotation.md @@ -269,10 +269,6 @@ Use the range slider in the Edit Opacity tool to change annotation opacity. ![Delete button](../../../javascript-es6/images/delete_button.png) -#### Edit strikethrough annotation properties - -The color and opacity of strikethrough annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. - ### Edit existing strikethrough annotations programmatically To modify existing strikethrough annotations programmatically, use the `editAnnotation()` method. Example: @@ -412,7 +408,7 @@ Set properties for individual annotations before creating the control using `Str N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default highlight settings. +Refer to the following code snippet to set the default strikethrough settings. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/underline-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/underline-annotation.md index 23bdecfd77..4f2e16e2ce 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/underline-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/underline-annotation.md @@ -246,8 +246,6 @@ if (underline) { {% endhighlight %} {% endtabs %} -## Edit underline annotation - ## Edit underline annotations ### Edit underline annotations in UI @@ -275,8 +273,6 @@ Use the range slider in the Edit Opacity tool to change annotation opacity. To modify existing underline annotations programmatically, use the `editAnnotation()` method. Example: -To modify an existing underline annotation programmatically, use the editAnnotation() method. Example: - ```html ``` @@ -412,7 +408,7 @@ Set properties for individual annotations before creating the control using `und N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default highlight settings. +Refer to the following code snippet to set the default underline settings. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md index 4c4da1a46d..34beb21a37 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md @@ -1,7 +1,7 @@ --- layout: post title: Annotations API in JavaScript PDF Viewer | Syncfusion -description: Learn how to read and configure annotations using APIs in the Syncfusion JavaScript PDF Viewer. +description: Learn how to read and configure annotations using APIs in the Syncfusion JavaScript PDF Viewer for enhanced document interactions. platform: document-processing control: PDF Viewer documentation: ug @@ -1334,11 +1334,11 @@ pdfviewer.appendTo('#PdfViewer'); - [Annotation Overview](../overview) - [Annotation Types](../annotations/annotation-types/area-annotation) -- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar) -- [Create and Modify Annotation](../../annotations/create-modify-annotation) -- [Customize Annotation](../../annotations/customize-annotation) -- [Remove Annotation](../../annotations/delete-annotation) -- [Handwritten Signature](../../annotations/signature-annotation) -- [Export and Import Annotation](../../annotations/export-import/export-annotation) -- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view) -- [Annotation Events](../../annotations/annotation-event) \ No newline at end of file +- [Annotation Toolbar](../toolbar-customization/annotation-toolbar) +- [Create and Modify Annotation](../annotations/create-modify-annotation) +- [Customize Annotation](../annotations/customize-annotation) +- [Remove Annotation](../annotations/delete-annotation) +- [Handwritten Signature](../annotations/signature-annotation) +- [Export and Import Annotation](../annotations/export-import/export-annotation) +- [Annotation in Mobile View](../annotations/annotations-in-mobile-view) +- [Annotation Events](../annotations/annotation-event) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md index fa7c18b372..df2752d73a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md @@ -113,7 +113,7 @@ Edit comments and replies in the following ways: ### How to add comments and replies programmatically -Comments can be added to the PDF document programmatically using the `editAnnotation` property. +Comments can be added to the PDF document programmatically using the `editAnnotation` method. The following example shows how to add comments and a reply in response to a button click. @@ -184,7 +184,7 @@ document.getElementById("addReply")?.addEventListener("click", function() { ### How to edit comments programmatically -Comments can be edited in the PDF document programmatically using the `editAnnotation` property. +Comments can be edited in the PDF document programmatically using the `editAnnotation` method. The following example shows how to edit comments and a reply in response to a button click. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-data.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-data.md index 5d89c11fab..e9b9a3f527 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-data.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-data.md @@ -1,14 +1,14 @@ --- layout: post title: Custom Data in annotations in JavaScript PDF Viewer | Syncfusion -description: Learn how to use add custom Data in annotation in Syncfusion JavaScript PDF Viewer +description: Learn how to add, store, and retrieve custom key-value data in annotations using Syncfusion JavaScript PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Custom data in annotations +# Custom data in PDF annotations Annotations can include custom key–value data via the `customData` property. This is supported at two levels: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-tools.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-tools.md index e1f9f77c05..d8f79dc242 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-tools.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-tools.md @@ -156,11 +156,9 @@ var annoToolbar = new Tool({ annoToolbar.appendTo('#annotationToolbar'); ``` -Note - -- `setAnnotationMode` accepts the annotation type name. Common values include: `Highlight`, `Underline`, `Strikethrough`, `StickyNotes`, `FreeText`, `Ink`, `Rectangle`, `Circle`, `Line`, `Arrow`, `Polygon`, `Polyline`, `Distance`, `Perimeter`, `Area`, `Radius`, and `None` to exit. -- Default annotation styles can be predefined using the corresponding settings properties (for example, `areaSettings`). -- To combine with a fully custom viewer toolbar, see Custom Toolbar in JavaScript PDF Viewer. +N> `setAnnotationMode` accepts the annotation type name. Common values include: `Highlight`, `Underline`, `Strikethrough`, `StickyNotes`, `FreeText`, `Ink`, `Rectangle`, `Circle`, `Line`, `Arrow`, `Polygon`, `Polyline`, `Distance`, `Perimeter`, `Area`, `Radius`, and `None` to exit. +N> Default annotation styles can be predefined using the corresponding settings properties (for example, `areaSettings`). +N> To combine with a fully custom viewer toolbar, see Custom Toolbar in JavaScript PDF Viewer. [View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/customize-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/customize-annotation.md index 45b81cad2d..316a9e79c0 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/customize-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/customize-annotation.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Customize annotations +# Customize annotation properties Annotation appearance and behavior (for example color, stroke color, thickness, and opacity) can be customized using the built‑in UI or programmatically. This page summarizes common customization patterns and shows how to set defaults per annotation type. @@ -33,36 +33,34 @@ Set defaults for specific annotation types when creating the `PdfViewer` instanc Text markup annotations: -- Highlight: Set default properties before creating the control using [`highlightSettings`](./annotation-types/highlight-annotation/#set-default-properties-during-control-initialization) -- Strikethrough: Use [`strikethroughSettings`](./annotation-types/strikethrough-annotation/#default-strikethrough-settings-during-initialization) -- Underline: Use [`underlineSettings`](./annotation-types/underline-annotation/#default-underline-settings-during-initialization) -- Squiggly: Use [`squigglySettings`](./annotation-types/Squiggly-annotation/#set-default-properties-during-control-initialization) +- Highlight: Set default properties before creating the control using [`highlightSettings`](./annotation-types/highlight-annotation#set-default-properties-during-control-initialization) +- Strikethrough: Use [`strikethroughSettings`](./annotation-types/strikethrough-annotation#default-strikethrough-settings-during-initialization) +- Underline: Use [`underlineSettings`](./annotation-types/underline-annotation#default-underline-settings-during-initialization) +- Squiggly: Use [`squigglySettings`](./annotation-types/Squiggly-annotation#set-default-properties-during-control-initialization) Shape annotations: -- Line: Use [`lineSettings`](./annotation-types/line-annotation/#default-line-settings-during-initialization) -- Arrow: Use [`arrowSettings`](./annotation-types/arrow-annotation/#default-arrow-settings-during-initialization) -- Rectangle: Use [`rectangleSettings`](./annotation-types/rectangle-annotation/#default-rectangle-settings-during-initialization) -- Circle: Use [`circleSettings`](./annotation-types/circle-annotation/#default-circle-settings-during-initialization) -- Polygon: Use [`polygonSettings`](./annotation-types/polygon-annotation/#default-polygon-settings-during-initialization) +- Line: Use [`lineSettings`](./annotation-types/line-annotation#default-line-settings-during-initialization) +- Arrow: Use [`arrowSettings`](./annotation-types/arrow-annotation#default-arrow-settings-during-initialization) +- Rectangle: Use [`rectangleSettings`](./annotation-types/rectangle-annotation#default-rectangle-settings-during-initialization) +- Circle: Use [`circleSettings`](./annotation-types/circle-annotation#default-circle-settings-during-initialization) +- Polygon: Use [`polygonSettings`](./annotation-types/polygon-annotation#default-polygon-settings-during-initialization) Measurement annotations: -- Distance: Use [`distanceSettings`](./annotation-types/distance-annotation/#default-distance-settings-during-initialization) -- Perimeter: Use [`perimeterSettings`](./annotation-types/perimeter-annotation/#default-perimeter-settings-during-initialization) -- Area: Use [`areaSettings`](./annotation-types/area-annotation/#default-area-settings-during-initialization) -- Radius: Use [`radiusSettings`](./annotation-types/radius-annotation/#default-radius-settings-during-initialization) -- Volume: Use [`volumeSettings`](./annotation-types/volume-annotation/#default-volume-settings-during-initialization) +- Distance: Use [`distanceSettings`](./annotation-types/distance-annotation#default-distance-settings-during-initialization) +- Perimeter: Use [`perimeterSettings`](./annotation-types/perimeter-annotation#default-perimeter-settings-during-initialization) +- Area: Use [`areaSettings`](./annotation-types/area-annotation#default-area-settings-during-initialization) +- Radius: Use [`radiusSettings`](./annotation-types/radius-annotation#default-radius-settings-during-initialization) +- Volume: Use [`volumeSettings`](./annotation-types/volume-annotation#default-volume-settings-during-initialization) Other annotations: -- Redaction: Use [`redactionSettings`](./annotation-types/redaction-annotation/#default-redaction-settings-during-initialization) -- Free text: Use [`freeTextSettings`](./annotation-types/free-text-annotation/#default-free-text-settings-during-initialization) -- Ink (freehand): Use [`inkAnnotationSettings`](./annotation-types/ink-annotation/#default-ink-settings-during-initialization) -- Stamp: Use [`stampSettings`](./annotation-types/stamp-annotation/#default-stamp-settings-during-initialization) -- Sticky notes: Use [`stickyNotesSettings`](./annotation-types/sticky-notes-annotation/#default-sticky-notes-settings-during-initialization) - -Set defaults for specific annotation types when creating the PdfViewer instance. Below are examples using settings already used in the annotation type pages. +- Redaction: Use [`redactionSettings`](./annotation-types/redaction-annotation#default-redaction-settings-during-initialization) +- Free text: Use [`freeTextSettings`](./annotation-types/free-text-annotation#default-free-text-settings-during-initialization) +- Ink (freehand): Use [`inkAnnotationSettings`](./annotation-types/ink-annotation#default-ink-settings-during-initialization) +- Stamp: Use [`stampSettings`](./annotation-types/stamp-annotation#default-stamp-settings-during-initialization) +- Sticky notes: Use [`stickyNotesSettings`](./annotation-types/sticky-notes-annotation#default-sticky-notes-settings-during-initialization) {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -186,7 +184,7 @@ if (btn) { } ``` -## Customize Annotation Settings +## Customize Annotation Settings Defines the settings of the annotations. You can change annotation settings like author name, height, width etc., using [annotationSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#annotationsettings) API diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-annotation.md index 2e8a6b9047..e9da3a2aea 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-annotation.md @@ -10,10 +10,10 @@ domainurl: ##DomainURL## # Export annotations in JavaScript PDF Viewer -PDF Viewer provides support to export annotations. You can export annotations from the PDF Viewer in two ways: +PDF Viewer provides support for exporting annotations. You can export annotations from the PDF Viewer in two ways: - Using the built-in UI in the Comments panel (JSON or XFDF file) -- Programmatically (JSON, XFDF, or as an object for custom handling) +- Programmatically (export to JSON, XFDF, or as a JSON object for custom handling) ## Export using the UI (Comments panel) @@ -28,7 +28,7 @@ Follow the steps to export annotations: 2. Click the overflow menu (three dots) at the top of the panel. 3. Choose Export annotation to JSON file or Export annotation to XFDF file. -This generates and downloads the selected format containing all annotations in the current document. +This generates and downloads a file in the selected format containing all annotations in the current document. ![Export Annotation](../annotation-images/export-annot.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/import-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/import-annotation.md index a020f3769e..80af6f1d53 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/import-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/import-annotation.md @@ -1,13 +1,13 @@ --- layout: post -title: Import annotations in JavaScript PDF Viewer | Syncfusion +title: Import annotations in JavaScript PDF Viewer ES5 | Syncfusion description: Learn how to import annotations in Syncfusion JavaScript PDF Viewer using UI options and programmatic APIs. platform: document-processing control: PDF Viewer documentation: ug --- -# Import annotations in JavaScript PDF Viewer +# Import annotations in PDF Viewer Annotations can be imported into the PDF Viewer using the built-in UI or programmatically. The UI accepts JSON and XFDF files from the Comments panel; programmatic import accepts an annotation object previously exported by the viewer. @@ -18,7 +18,7 @@ The Comments panel provides import options in its overflow menu: - Import annotations from JSON file - Import annotations from XFDF file -Steps: +Follow the steps to import annotations: 1. Open the Comments panel in the PDF Viewer. 2. Click the overflow menu (three dots) at the top of the panel. 3. Choose the appropriate import option and select the file. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md deleted file mode 100644 index bc46a7f0bf..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -layout: post -title: Free text annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about free text annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Free text annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete free text annotations. - -## Add a free text annotation to the PDF document - -Free text annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it. -* Select the **Free Text Annotation** button to enable free text annotation mode. -* Add text anywhere on the pages of the PDF document. - -When in pan mode, selecting free text annotation switches the PDF Viewer to text select mode. - -![Free text tool in the annotation toolbar](../images/freetext_tool.png) - -The following example switches to free text annotation mode using a button click. - - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let addFreeTextAnnotationButton = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotationButton) { - addFreeTextAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("FreeText"); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer' - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let addFreeTextAnnotationButton = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotationButton) { - addFreeTextAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("FreeText"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a free text annotation programmatically to the PDF document - -The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example of adding a free text annotation programmatically using addAnnotation(): - -```html - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let addFreeTextAnnotation = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotation) { - addFreeTextAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("FreeText", { - offset: { x: 120, y: 80 }, - fontSize: 16, - fontFamily: "Helvetica", - pageNumber: 1, - width: 200, - height: 40, - isLock: false, - defaultText: "Syncfusion" - } ); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer' - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let addFreeTextAnnotation = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotation) { - addFreeTextAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("FreeText", { - offset: { x: 120, y: 80 }, - fontSize: 16, - fontFamily: "Helvetica", - pageNumber: 1, - width: 200, - height: 40, - isLock: false, - defaultText: "Syncfusion" - } ); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Change the content of an existing free text annotation programmatically - -To change the content of an existing free text annotation programmatically, use the editAnnotation() method. - -Here is an example of changing the content of a free text annotation using editAnnotation(): - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let changeContent = document.getElementById('changeContent'); -if (changeContent) { - changeContent.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Text Box') { - pdfviewer.annotationCollection[i].dynamicText = 'syncfusion'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer' - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let changeContent = document.getElementById('changeContent'); -if (changeContent) { - changeContent.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Text Box') { - pdfviewer.annotationCollection[i].dynamicText = 'syncfusion'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -N> The current version of the PDF Viewer does not edit existing document text. New free text annotations can be added and modified within the document. - -## Edit the properties of free text annotations - -Font family, font size, styles, font color, text alignment, fill color, stroke color, border thickness, and opacity can be edited using the Font Family, Font Size, Font Color, Text Align, Font Style, Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Edit font family - -Edit the font family by selecting a font in the Font Family tool. - -![Change font family](../images/fontfamily.png) - -### Edit font size - -Edit the font size by selecting a size in the Font Size tool. - -![Change font size](../images/fontsize.png) - -### Edit font color - -Edit the font color using the color palette in the Font Color tool. - -![Change font color](../images/fontcolor.png) - -### Edit text alignment - -Align text by selecting an option from the Text Align tool. - -![Set text alignment](../images/textalign.png) - -### Edit text styles - -Edit text styles by selecting options in the Font Style tool. - -![Change text styles](../images/fontstyle.png) - -### Edit fill color - -Edit the fill color using the color palette in the Edit Color tool. - -![Change fill color](../images/fillcolor.png) - -### Edit stroke color - -Edit the stroke color using the color palette in the Edit Stroke Color tool. - -![Change stroke color](../images/fontstroke.png) - -### Edit thickness - -Edit border thickness using the range slider in the Edit Thickness tool. - -![Change border thickness](../images/fontthickness.png) - -### Edit opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![Change opacity](../images/fontopacity.png) - -## Set default properties during control initialization - -Default properties for free text annotations can be set before creating the control using FreeTextSettings. - -After changing default values, the selected values are applied. The following example sets default free text annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - freeTextSettings : { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' } - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - freeTextSettings : { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' } - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md deleted file mode 100644 index 477e9f9900..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -layout: post -title: Ink annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about ink annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Ink annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete ink annotations. - -![Ink annotations overview](../images/ink_annotation.png) - -## Add an ink annotation to the PDF document - -Ink annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it. -* Select the **Draw Ink** button to enable ink annotation mode. -* Draw on any page of the PDF document. - -![Ink tool in the annotation toolbar](../images/ink_tool.png) - -The following example switches to ink annotation mode. - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Ink"); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Ink"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add an ink annotation programmatically to the PDF document - -The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example of adding an ink annotation programmatically using addAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Ink", { - offset: { x: 150, y: 100 }, - pageNumber: 1, - width : 200, - height:60, - path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]' - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Ink", { - offset: { x: 150, y: 100 }, - pageNumber: 1, - width : 200, - height:60, - path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]' - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing ink annotation programmatically - -To modify an existing ink annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let editInkAnnotation = document.getElementById('editInkAnnotation'); -if (editInkAnnotation) { - editInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "Ink") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let editInkAnnotation = document.getElementById('editInkAnnotation'); -if (editInkAnnotation) { - editInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "Ink") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit the properties of ink annotations - -Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Edit stroke color - -Edit the stroke color using the color palette in the Edit Stroke Color tool. - -![Change ink stroke color](../images/ink_strokecolor.png) - -### Edit thickness - -Edit thickness using the range slider in the Edit Thickness tool. - -![Change ink thickness](../images/ink_thickness.png) - -### Edit opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![Change ink opacity](../images/ink_opacity.png) - -## Set default properties during control initialization - -Default properties for ink annotations can be set before creating the control using InkAnnotationSettings. - -After changing default values, the selected values are applied. -Refer to the following code sample to set the default ink annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"; -pdfviewer.inkAnnotationSettings = {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6}; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'; -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.inkAnnotationSettings = {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6}; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md index be5e82a40f..341acb1300 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md @@ -131,7 +131,6 @@ document.getElementById('disableBtn').addEventListener('click', function() { Use the `inkEraserSize` property to control the width of the eraser: - ```html @@ -190,7 +189,6 @@ function applyRoleBasedEraserSettings() { You can programmatically switch between Ink drawing mode and Eraser mode for a seamless workflow: - ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md index 4d6c9ac907..16ad9d835b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md @@ -1,7 +1,7 @@ --- layout: post title: Line angle constraints in JavaScript PDF Viewer | Syncfusion -description: Learn to add, edit, delete, and configure highlight, underline, strikethrough, and squiggly text markup annotations programmatically in PDF Viewer. +description: Learn to enable line angle constraints in Syncfusion JavaScript PDF Viewer for precise line-type annotations. platform: document-processing control: PDF Viewer documentation: ug @@ -12,7 +12,7 @@ domainurl: ##DomainURL## The PDF Viewer provides line angle constraints functionality that allows drawing line-type annotations with controlled angle snapping. This improves precision for technical drawings and measurements in PDF documents. -![Line angle constraint](../annotations/annotation-images/line-angle-constraint.gif) +![Line angle constraint](../../javascript-es6/annotations/annotation-images/line-angle-constraint.gif) ## Enable line angle constraints @@ -21,7 +21,6 @@ Set the `enableLineAngleConstraints` property within `annotationDrawingOptions` The following code demonstrates enabling line angle constraints: ```js - var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", @@ -29,8 +28,7 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({ }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); - pdfviewer.appendTo('#PdfViewer'); - +pdfviewer.appendTo('#PdfViewer'); ``` ## Work with constrained annotations diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md deleted file mode 100644 index 5bda021b57..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md +++ /dev/null @@ -1,581 +0,0 @@ ---- -layout: post -title: Measurement annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about measurement annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): distance, perimeter, area, radius, and volume. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Measurement annotation in JavaScript PDF Viewer control - -The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are: - -* Distance -* Perimeter -* Area -* Radius -* Volume - -![Measurement annotations overview](../images/calibrate_annotation.png) - -## Adding measurement annotations to the PDF document - -The measurement annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the **Measurement Annotation** drop-down button. The pop-up lists available measurement annotation types. -* Select a measurement type to enable its annotation mode. -* Measure and add annotations on the pages of the PDF document. - -When in pan mode, selecting a measurement annotation switches the PDF Viewer to text select mode. - - ![CalibrateTool](../images/calibrate_tool.png) - -The following example switches to distance annotation mode. - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let distanceMode = document.getElementById('distanceMode'); -if (distanceMode) { - distanceMode.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Distance"); - } - }); -} - - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let distanceMode = document.getElementById('distanceMode'); -if (distanceMode) { - distanceMode.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Distance"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a measurement annotation to the PDF document programmatically - -The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example showing how to add measurement annotations programmatically using addAnnotation(): - -```html - - - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let addDistanceAnnotation = document.getElementById('addDistanceAnnotation'); -if (addDistanceAnnotation) { - addDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Distance", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addPerimeterAnnotation = document.getElementById('addPerimeterAnnotation'); -if (addPerimeterAnnotation) { - addPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Perimeter", { - offset: { x: 200, y: 350 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }] - }); - } - }); -} - -let addAreaAnnotation = document.getElementById('addAreaAnnotation'); -if (addAreaAnnotation) { - addAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Area", { - offset: { x: 200, y: 500 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }] - }); - } - }); -} - -let addRadiusAnnotation = document.getElementById('addRadiusAnnotation'); -if (addRadiusAnnotation) { - addRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Radius", { - offset: { x: 200, y: 630 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addVolumeAnnotation = document.getElementById('addVolumeAnnotation'); -if (addVolumeAnnotation) { - addVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Volume", { - offset: { x: 200, y: 810 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }] - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let addDistanceAnnotation = document.getElementById('addDistanceAnnotation'); -if (addDistanceAnnotation) { - addDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Distance", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addPerimeterAnnotation = document.getElementById('addPerimeterAnnotation'); -if (addPerimeterAnnotation) { - addPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Perimeter", { - offset: { x: 200, y: 350 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }] - }); - } - }); -} - -let addAreaAnnotation = document.getElementById('addAreaAnnotation'); -if (addAreaAnnotation) { - addAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Area", { - offset: { x: 200, y: 500 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }] - }); - } - }); -} - -let addRadiusAnnotation = document.getElementById('addRadiusAnnotation'); -if (addRadiusAnnotation) { - addRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Radius", { - offset: { x: 200, y: 630 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addVolumeAnnotation = document.getElementById('addVolumeAnnotation'); -if (addVolumeAnnotation) { - addVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Volume", { - offset: { x: 200, y: 810 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }] - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing measurement annotation programmatically - -To modify an existing measurement annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - - - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let editDistanceAnnotation = document.getElementById('editDistanceAnnotation'); -if (editDistanceAnnotation) { - editDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Distance calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPerimeterAnnotation = document.getElementById('editPerimeterAnnotation'); -if (editPerimeterAnnotation) { - editPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Perimeter calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editAreaAnnotation = document.getElementById('editAreaAnnotation'); -if (editAreaAnnotation) { - editAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Area calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRadiusAnnotation = document.getElementById('editRadiusAnnotation'); -if (editRadiusAnnotation) { - editRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Radius calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editVolumeAnnotation = document.getElementById('editVolumeAnnotation'); -if (editVolumeAnnotation) { - editVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Volume calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let editDistanceAnnotation = document.getElementById('editDistanceAnnotation'); -if (editDistanceAnnotation) { - editDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Distance calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPerimeterAnnotation = document.getElementById('editPerimeterAnnotation'); -if (editPerimeterAnnotation) { - editPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Perimeter calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editAreaAnnotation = document.getElementById('editAreaAnnotation'); -if (editAreaAnnotation) { - editAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Area calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRadiusAnnotation = document.getElementById('editRadiusAnnotation'); -if (editRadiusAnnotation) { - editRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Radius calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editVolumeAnnotation = document.getElementById('editVolumeAnnotation'); -if (editVolumeAnnotation) { - editVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Volume calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit the properties of measurement annotations - -The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Edit fill color - -The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. - -![CalibrateFillColor](../images/calibrate_fillcolor.png) - -### Edit stroke color - -The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. - -![CalibrateStrokeColor](../images/calibrate_stroke.png) - -### Edit thickness - -Edit border thickness using the range slider provided in the Edit Thickness tool. - -![CalibrateThickness](../images/calibrate_thickness.png) - -### Edit opacity - -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. - -![CalibrateOpacity](../images/calibrate_opacity.png) - -### Edit the line properties - -Line-based measurement annotations (distance and perimeter) have additional options in the Line Properties window. Open it by right-clicking the annotation and selecting Properties from the context menu. - -![CalibrateProperty](../images/calibrate_lineprop.png) - -## Set default properties during control initialization - -Default properties for measurement annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings, and volumeSettings. - -Refer to the following code snippet to set the default annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - distanceSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - perimeterSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - areaSettings :{fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - radiusSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - volumeSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'}, - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - distanceSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - perimeterSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - areaSettings :{fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - radiusSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - volumeSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'}, - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} -## Editing scale ratio and unit of the measurement annotation - -The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control. - - ![CalibrateScaleRatio](../images/calibrate_scaleratio.png) - -The Units of measurements support for the measurement annotations in the PDF Viewer are - -* Inch -* Millimeter -* Centimeter -* Point -* Pica -* Feet - -![CalibrateScaleDialog](../images/calibrate_scaledialog.png) - -## Setting default scale ratio settings during control initialization - -The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet, - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - measurementSettings = {scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}, - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - measurementSettings = {scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}, - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md index 74db220781..1ca014f970 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Overview of Annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about overview of annotations in the Syncfusion JavaScript PDF Viewer. +description: Learn about annotations in Syncfusion JavaScript PDF Viewer for reviewing, marking up, and annotating PDF documents. platform: document-processing control: PDF Viewer documentation: ug @@ -28,7 +28,7 @@ The PDF Viewer provides a complete set of annotation tools for reviewing, measur ## Annotation manipulation capabilities - [Create annotations](../annotations/create-modify-annotation): Use the toolbar, context menu, or APIs to add highlights, notes, shapes, and more directly onto the PDF document. -- [Edit annotations](../annotations/create-modify-annotation.md): Modify existing annotations by moving, resizing, or updating text and style properties like color, opacity, and thickness. +- [Edit annotations](../annotations/create-modify-annotation): Modify existing annotations by moving, resizing, or updating text and style properties like color, opacity, and thickness. - [Customize annotations](../annotations/customize-annotation): Adjust appearance and behavior—such as fonts, fill colors, and opacity—through the UI or configuration options. - [Undo and redo annotations](../annotations/annotations-undo-redo): Revert or reapply annotation actions (add, edit, delete) using toolbar buttons or corresponding APIs. - [Import and export annotations](../annotations/export-import/export-annotation): Save and load annotations in JSON or XFDF formats to persist markups across sessions or share them with others. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md deleted file mode 100644 index 3b547003b4..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md +++ /dev/null @@ -1,534 +0,0 @@ ---- -layout: post -title: Shape annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about shape annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2), including add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Shape annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are: - -* Line -* Arrow -* Rectangle -* Circle -* Polygon - -![Shape annotations overview](../images/shape_annot.png) - -## Adding a shape annotation to the PDF document - -Shape annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the **Shape Annotation** drop-down button. The pop-up lists available shape annotation types. -* Select a shape type to enable its annotation mode. -* Draw the shape on the pages of the PDF document. - -N> When in pan mode and a shape annotation tool is selected, the PDF Viewer switches to text select mode automatically to ensure a smooth interaction experience. - -![Shape annotation toolbar](../images/shape_toolbar.png) - -Refer to the following code sample to switch to the circle annotation mode. - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let circleAnnotationButton = document.getElementById('circleAnnotationButton'); -if (circleAnnotationButton) { - circleAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Circle"); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer' - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let circleAnnotationButton = document.getElementById('circleAnnotationButton'); -if (circleAnnotationButton) { - circleAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Circle"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a shape annotation to the PDF document programmatically - -The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. - -Here is an example showing how to add shape annotations programmatically using addAnnotation(): - -```html - - - - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let addLineAnnotation = document.getElementById('addLineAnnotation'); -if (addLineAnnotation) { - addLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Line", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addArrowAnnotation = document.getElementById('addArrowAnnotation'); -if (addArrowAnnotation) { - addArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Arrow", { - offset: { x: 200, y: 370 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }] - }); - } - }); -} - -let addRectangleAnnotation = document.getElementById('addRectangleAnnotation'); -if (addRectangleAnnotation) { - addRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Rectangle", { - offset: { x: 200, y: 480 }, - pageNumber: 1, - width: 150, - height: 75 - }); - } - }); -} - -let addCircleAnnotation = document.getElementById('addCircleAnnotation'); -if (addCircleAnnotation) { - addCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Circle", { - offset: { x: 200, y: 620 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addPolygonAnnotation = document.getElementById('addPolygonAnnotation'); -if (addPolygonAnnotation) { - addPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Polygon", { - offset: { x: 200, y: 800 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }] - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let addLineAnnotation = document.getElementById('addLineAnnotation'); -if (addLineAnnotation) { - addLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Line", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addArrowAnnotation = document.getElementById('addArrowAnnotation'); -if (addArrowAnnotation) { - addArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Arrow", { - offset: { x: 200, y: 370 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }] - }); - } - }); -} - -let addRectangleAnnotation = document.getElementById('addRectangleAnnotation'); -if (addRectangleAnnotation) { - addRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Rectangle", { - offset: { x: 200, y: 480 }, - pageNumber: 1, - width: 150, - height: 75 - }); - } - }); -} - -let addCircleAnnotation = document.getElementById('addCircleAnnotation'); -if (addCircleAnnotation) { - addCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Circle", { - offset: { x: 200, y: 620 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addPolygonAnnotation = document.getElementById('addPolygonAnnotation'); -if (addPolygonAnnotation) { - addPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Polygon", { - offset: { x: 200, y: 800 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }] - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing shape annotation programmatically - -To modify an existing shape annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - - - - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let editLineAnnotation = document.getElementById('editLineAnnotation'); -if (editLineAnnotation) { - editLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Line") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editArrowAnnotation = document.getElementById('editArrowAnnotation'); -if (editArrowAnnotation) { - editArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Arrow") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRectangleAnnotation = document.getElementById('editRectangleAnnotation'); -if (editRectangleAnnotation) { - editRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Rectangle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editCircleAnnotation = document.getElementById('editCircleAnnotation'); -if (editCircleAnnotation) { - editCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Circle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPolygonAnnotation = document.getElementById('editPolygonAnnotation'); -if (editPolygonAnnotation) { - editPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Polygon") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let editLineAnnotation = document.getElementById('editLineAnnotation'); -if (editLineAnnotation) { - editLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Line") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editArrowAnnotation = document.getElementById('editArrowAnnotation'); -if (editArrowAnnotation) { - editArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Arrow") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRectangleAnnotation = document.getElementById('editRectangleAnnotation'); -if (editRectangleAnnotation) { - editRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Rectangle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editCircleAnnotation = document.getElementById('editCircleAnnotation'); -if (editCircleAnnotation) { - editCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Circle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPolygonAnnotation = document.getElementById('editPolygonAnnotation'); -if (editPolygonAnnotation) { - editPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Polygon") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Editing the properties of the shape annotation - -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. - -### Editing fill color - -The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. - -![Edit fill color for shapes](../images/shape_fillColor.png) - -### Editing stroke color - -The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. - -![Edit stroke color for shapes](../images/shape_strokecolor.png) - -### Editing thickness - -The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool. - -![Edit thickness for shapes](../images/shape_thickness.png) - -### Editing opacity - -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. - -![Edit opacity for shapes](../images/shape_opacity.png) - -### Editing the line properties - -Line and arrow 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. - -Refer to the following code sample to set the default annotation settings. - -![Line properties dialog](../images/shape_lineprty.png) - -## Set default properties during control initialization - -Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - lineSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - arrowSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - rectangleSettings : {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - circleSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - polygonSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'} - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - lineSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - arrowSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - rectangleSettings : {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - circleSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - polygonSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'} - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md index d6754bfe0b..2200f77b45 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md @@ -33,7 +33,7 @@ The handwritten signature can be added to the PDF document using the annotation Refer to the following code sample to switch to the handwritten signature mode programmatically. ```html - + ``` {% tabs %} {% highlight ts tabtitle="Standalone" %} @@ -77,11 +77,11 @@ if (handWrittenSignature) { ### Add a handwritten signature programmatically -With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. +With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. Here is an example of adding a handwritten signature programmatically using the `addAnnotation()` method: ```html - + ``` {% tabs %} @@ -252,7 +252,7 @@ document.getElementById('Signature')?.addEventListener('click', function () { height: 65, signatureItem: ['Signature'], signatureDialogSettings: { - displayMode: DisplayMode.Text, hideSaveSignature: false + displayMode: ej.pdfviewer.DisplayMode.Text, hideSaveSignature: false }, canSave: false, path: 'Syncfusion', @@ -290,7 +290,7 @@ document.getElementById('Signature')?.addEventListener('click', function () { height: 65, signatureItem: ['Signature'], signatureDialogSettings: { - displayMode: DisplayMode.Text, hideSaveSignature: false + displayMode: ej.pdfviewer.DisplayMode.Text, hideSaveSignature: false }, canSave: false, path: 'Syncfusion', @@ -341,7 +341,7 @@ pdfviewer.enableHandwrittenSignature = false; {% endhighlight %} {% endtabs %} -N> When `enableHandwrittenSignature` is set to `false`, the handwritten signature toolbar and related UI are disabled; existing handwritten signature annotations remain in the document unless removed. The `canSave` option in annotation examples controls whether a signature can be saved for reuse; when `canSave` is `false`, signatures are not persisted in the signature collection for later reuse. +Note: When `enableHandwrittenSignature` is set to `false`, the handwritten signature toolbar and related UI are disabled; existing handwritten signature annotations remain in the document unless removed. The `canSave` option in annotation examples controls whether a signature can be saved for reuse; when `canSave` is `false`, signatures are not persisted in the signature collection for later reuse. ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md deleted file mode 100644 index 0af4ee5c88..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -layout: post -title: Stamp annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about stamp annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): dynamic, sign here, standard business, and custom stamps. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Stamp annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotations in PDF documents: - -* Dynamic -* Sign Here -* Standard Business -* Custom Stamp - -![StampAnnotation](../images/stamp_annot.png) - -## Add stamp annotations to the PDF document - -The stamp annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types. - -![StampTool](../images/stamp_tool.png) - -* Select a stamp type to enable its annotation mode. - -![StampPopup](../images/selectstamp_annot.png) - -* Place the stamp on the pages of the PDF document. - -N> When in pan mode and a stamp annotation tool is selected, the PDF Viewer switches to text select mode automatically for a smooth interaction experience. - -The following examples switch to stamp annotation modes. - -```html - - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', 'NotApproved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, 'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, 'Approved'); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem, StandardBusinessStampItem, DynamicStampItem,} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'; -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', 'NotApproved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, 'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, 'Approved'); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a custom stamp to the PDF document - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types. -* Click the Custom Stamp button. - -![CustomStamp](../images/customStamp.png) - -* In the file explorer dialog, choose an image and add it to the PDF page. - ->Only JPG and JPEG image formats are supported for custom stamp annotations. - -## Add a stamp annotation to the PDF document programmatically - -The PDF Viewer library allows adding a stamp annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#annotation) method. - -Here are examples showing how to add stamp annotations programmatically using addAnnotation(): - -```html - - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 140 }, - pageNumber: 1 - }, 'Approved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 240 }, - pageNumber: 1 - }, undefined,'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 340 }, - pageNumber: 1 - }, undefined, undefined, 'Approved'); - } - }); -} - -let customStamp = document.getElementById('customStamp'); -if (customStamp) { - customStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation('Stamp', - { - offset: { x: 100, y: 440 }, - width: 46, - author: 'Guest', - height: 100, - isLock: true, - pageNumber: 1, - customStamps: [ - { - customStampName: "Image", - customStampImageSource: - "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z" - } - ] - }); - } - }); -} -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 140 }, - pageNumber: 1 - }, 'Approved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 240 }, - pageNumber: 1 - }, undefined,'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 340 }, - pageNumber: 1 - }, undefined, undefined, 'Approved'); - } - }); -} - -let customStamp = document.getElementById('customStamp'); -if (customStamp) { - customStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation('Stamp', - { - offset: { x: 100, y: 440 }, - width: 46, - author: 'Guest', - height: 100, - isLock: true, - pageNumber: 1, - customStamps: [ - { - customStampName: "Image", - customStampImageSource: - "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z" - } - ] - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Edit an existing stamp annotation programmatically - -To modify an existing stamp annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -if (editAnnotation) { - editAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "stamp") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].annotationSettings.isLock = true; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -if (editAnnotation) { - editAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "stamp") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].annotationSettings.isLock = true; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Set default properties during control initialization - -Default properties for stamp annotations can be set before creating the control using StampSettings. - -After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default stamp annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - stampSettings : {opacity: 0.3, author: 'Guest User'} - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - stampSettings : {opacity: 0.3, author: 'Guest User'} - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md deleted file mode 100644 index e5a5c63bd3..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -layout: post -title: Sticky notes in JavaScript PDF Viewer control | Syncfusion -description: Learn about sticky note annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Sticky notes in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document. - -![StickyNotesAnnotation](../images/stickynotes_annotation.png) - -## Add a sticky note annotation to the PDF document - -Sticky note annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Comments** button in the PDF Viewer toolbar. The annotation toolbar appears below it. -* Click the position where the sticky note annotation should be added. -* The sticky note annotation is added at the clicked position. - - ![StickyNotesTool](../images/stickynotes_tool.png) - -Annotation comments can be added using the comment panel. - -* Select a sticky note annotation in the PDF document and right-click it. -* Select Comment from the context menu. -* Add comments, replies, and status using the comment panel. - -![StickyNotesComment](../images/stickynotes_comment.png) - -## Add a sticky note annotation to the PDF document programmatically - -The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. - -Here is an example showing how to add a sticky note annotation programmatically using addAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("StickyNotes", { - offset: { x: 100, y: 200 }, - pageNumber: 1, - isLock: false - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("StickyNotes", { - offset: { x: 100, y: 200 }, - pageNumber: 1, - isLock: false - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing sticky note annotation programmatically - -To modify an existing sticky note annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "sticky") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "sticky") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit the properties of sticky note annotations - -### Editing opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![StickyNotesOpacity](../images/sticky_opacity.png) - -### Editing comments - -Comment text, replies, and status can be edited using the comment panel. - -* Open the comment panel using the Comment Panel button in the annotation toolbar. - - ![StickyNotesComment](../images/commentPanel.png) - -Modify or delete comments or replies, and change status using the menu options in the comment panel. - - ![StickyNotesEdit](../images/sticky_editbtn.png) - -## Set default properties during control initialization - -Default properties for sticky note annotations can be set before creating the control using StickyNotesSettings. - -After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default sticky note annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - stickyNotesSettings : {author: 'Syncfusion'} - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - stickyNotesSettings : {author: 'Syncfusion'} - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## Disable sticky note annotations - -The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - enableStickyNotesAnnotation : false - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - enableStickyNotesAnnotation : false - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md deleted file mode 100644 index 13005db875..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md +++ /dev/null @@ -1,575 +0,0 @@ ---- -layout: post -title: Text markup annotation in JavaScript PDF Viewer | Syncfusion -description: Learn to add, edit, delete, and customize text markup annotations like highlight, underline, and squiggly in Syncfusion JavaScript PDF Viewer. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Text markup annotation in JavaScript PDF Viewer - -The PDF Viewer provides options to add, edit, and delete text markup annotations, including Highlight, Underline, Strikethrough, and Squiggly. - -![Alt text](../images/text_markup_annotation.png) - -## Highlight text - -There are two ways to highlight text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Highlight** in the context menu. - -![Alt text](../images/highlight_context.png) - - -2. Using the annotation toolbar -* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. -* Select **Highlight** to enable highlight mode. -* Select text to add the highlight annotation. -* Alternatively, select text first and then click **Highlight**. - -![Alt text](../images/highlight_button.PNG) - -When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection. - -Refer to the following code snippet to switch to highlight mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/highlight-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) in the `index.html` file -`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` - -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/highlight-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from highlight mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/highlight-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.html` file -`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` - -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/highlight-normal-mode-cs1" %} - -## Highlight text programmatically - -Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let highlight = document.getElementById('highlight'); -if (highlight) { - highlight.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Highlight", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let highlight = document.getElementById('highlight'); -if (highlight) { - highlight.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Highlight", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Underline text - -There are two ways to underline text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Underline** in the context menu. - -![Alt text](../images/underline_context.png) - - -2. Using the annotation toolbar -* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. -* Select **Underline** to enable underline mode. -* Select text to add the underline annotation. -* Alternatively, select text first and then click **Underline**. - -![Alt text](../images/underline_button.png) - -In the pan mode, if the underline mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for underlining the text. - -Refer to the following code snippet to switch to underline mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/underline-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.html` file -`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` - -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/underline-mode-cs1" %} - - -Refer to the following code snippet to switch back to normal mode from underline mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/underline-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.html` file -`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` - -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/underline-normal-mode-cs1" %} - -## Underline text programmatically - -Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let underline = document.getElementById('underline'); -if (underline) { - underline.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Underline", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let underline = document.getElementById('underline'); -if (underline) { - underline.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Underline", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Strikethrough text - -There are two ways to strikethrough text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Strikethrough** in the context menu. - -![Alt text](../images/strikethrough_context.png) - - -2. Using the annotation toolbar -* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. -* Select **Strikethrough** to enable strikethrough mode. -* Select text to add the strikethrough annotation. -* Alternatively, select text first and then click **Strikethrough**. - -![Alt text](../images/strikethrough_button.png) - -In the pan mode, if the strikethrough mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for striking through the text. - -Refer to the following code snippet to switch to strikethrough mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/strikethrough-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.html` file -`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` - -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/strikethrough-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from strikethrough mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/strikethrough-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.html` file -`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` - -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/strikethrough-normal-mode-cs1" %} - -## Strikethrough text programmatically - -Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let strikethrough = document.getElementById('strikethrough'); -if (strikethrough) { - strikethrough.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Strikethrough", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let strikethrough = document.getElementById('strikethrough'); -if (strikethrough) { - strikethrough.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Strikethrough", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Add squiggly to text - -There are two ways to add squiggly to text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Squiggly** in the context menu. - -![Alt text](../images/squiggly_context.png) - -2. Using the annotation toolbar -* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. -* Select **Squiggly** to enable squiggly mode. -* Select text to add the squiggly annotation. -* Alternatively, select text first and then click **Squiggly**. - -![Alt text](../images/squiggly_button.png) - -In the pan mode, if the squiggly mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for adding squiggly to the text. - -Refer to the following code snippet to switch to squiggly mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/squiggly-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.html` file -`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` - -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/squiggly-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from squiggly mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/squiggly-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.html` file -`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` - -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/squiggly-normal-mode-cs1" %} - -## Add squiggly to text programmatically - -Programmatically add squiggly using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -let squiggly = document.getElementById('squiggly'); -if (squiggly) { - squiggly.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Squiggly", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let squiggly = document.getElementById('squiggly'); -if (squiggly) { - squiggly.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Squiggly", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Deleting a text markup annotation - -The selected annotation can be deleted in the following ways: - -1. Using the Delete/Backspace key - * Select the annotation. - * Press Delete (or Backspace). The selected annotation is removed. - -2. Using the annotation toolbar - * Select the annotation. - * Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed. - -![Alt text](../images/delete_button.png) - -## Edit text markup annotation properties - -The color and the opacity of the text markup annotation can be edited using the Edit Color tool and the Edit Opacity tool in the annotation toolbar. - -### Edit color - -Use the color palette in the Edit Color tool to change the annotation color. - -![Alt text](../images/edit_color.png) - -### Edit opacity - -Use the range slider in the Edit Opacity tool to change annotation opacity. - -![Alt text](../images/edit_opacity.png) - -## Set default properties during control initialization - -Set default properties before creating the control using `highlightSettings`, `underlineSettings`, `strikethroughSettings`, and `squigglySettings`. - -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. - -Refer to the following code snippet to set the default annotation settings. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"", - highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''}, - underlineSettings: {author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: ''}, - strikethroughSettings: {author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: ''}, - squigglySettings: {author: 'Guest User', subject: 'Spelling Error', color: '#ff0000', opacity: 0.9, modifiedDate: ''} -}); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''}, - underlineSettings: {author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: ''}, - strikethroughSettings: {author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: ''}, - squigglySettings: {author: 'Guest User', subject: 'Spelling Error', color: '#ff0000', opacity: 0.9, modifiedDate: ''} -}); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## Perform undo and redo - -The PDF Viewer supports undo and redo for changes. For text markup annotations, undo and redo are provided for: - -* Inclusion of the text markup annotations. -* Deletion of the text markup annotations. -* Change of either color or opacity of the text markup annotations. - -Undo and redo actions can be performed in the following ways: - -1. Using keyboard shortcuts: - After performing a text markup annotation action, press Ctrl+Z to undo and Ctrl+Y to redo. -2. Using the toolbar: - Use the **Undo** and **Redo** tools in the toolbar. - -Refer to the following code snippet to call undo and redo actions from the client side. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/undo-redo-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.html` file -`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` - -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/undo-redo-cs1" %} - -## Save text markup annotations - -Click the download tool in the toolbar to save text markup annotations to the PDF document. The original document is not modified. - -## Print text markup annotations - -Click the print tool in the toolbar to print the PDF document with text markup annotations. The original document is not modified. - -## Disable text markup annotation - -Disable text markup annotations using the `enableTextMarkupAnnotation` property. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - enableTextMarkupAnnotation: false, - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - enableTextMarkupAnnotation: false, - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer' - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## See also - -* [Toolbar items](../toolbar) -* [Feature modules](../feature-module) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/custom-data.md index 1bf494a8d2..f3b23ce089 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/custom-data.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/custom-data.md @@ -30,6 +30,7 @@ This page explains how to: You can attach custom data at the time of field creation by passing a `customData` object in the settings parameter of `addFormField()`. ```js +// Ensure the viewer instance (var viewer = new ej.pdfviewer.PdfViewer({ ... })) is created and appended before this code runs. viewer.documentLoad = function () { var meta = { businessId: 'C-1024', tags: ['profile','kiosk'], requiredRole: 'admin' }; viewer.formDesignerModule.addFormField('Textbox', { @@ -70,7 +71,7 @@ viewer.checkBoxFieldSettings = { ## Update or Replace PDF Form Field Custom Data -Modify the `customData` of an existing form field using [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields). The field can be identified using its object reference or field ID. +Modify the `customData` of an existing form field using [`updateFormField()`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#updateformfields). The field can be identified using its object reference or field ID. ```js // Retrieve existing fields @@ -85,7 +86,7 @@ if (target) { ``` **Tip:** -Merge new values with the existing `customData` object before calling [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data. +Merge new values with the existing `customData` object before calling [`updateFormField()`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data. ## Read Custom Data from PDF Form Fields @@ -121,7 +122,7 @@ viewer.documentLoad = function () { - [Form Designer overview](./overview) - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) - [Create form fields](./overview-create-forms) -- [Group form fields](../group-form-fields) +- [Group form fields](./group-form-fields) - [Form flags](./form-constrain) - [Form validation](./form-validation) - [Form fields API](./form-fields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-constrain.md index be521e030f..4e270dc391 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-constrain.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-constrain.md @@ -22,7 +22,7 @@ This topic explains: The following flags are supported in the PDF Viewer: -- [isReadOnly](#make-fields-read-only) +- [isReadOnly](#make-fields-read-only) Prevents users from modifying the form field in the UI while still allowing updates through APIs. - [isRequired](#mark-fields-as-required) @@ -33,7 +33,7 @@ The following flags are supported in the PDF Viewer: ## Key actions -### Make fields read only +### Make fields read-only Use the `isReadOnly` property to prevent users from modifying a form field through the UI. This is useful for displaying pre-filled or calculated values that should not be changed by the user. ```js diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md index 4186925d88..7ae8cdc083 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md @@ -73,7 +73,7 @@ pdfviewer.appendTo('#PdfViewer'); ## Form designer UI -When [Form Designer mode](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formdesigner) is enabled in the [JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI provides a built in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer. +When [Form Designer mode](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formdesigner) is enabled in the [JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI provides a built-in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer. ![FormDesigner](../../javascript-es6/images/FormDesigner.gif) @@ -128,7 +128,7 @@ For more information about creating and editing form fields in the PDF Viewer, r ## Show or Hide the Built-in Form Designer Toolbar -You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) method. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements. +You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) property. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements. **Use this method to:** - Show the Form Designer toolbar when form design is required @@ -186,7 +186,7 @@ Move, resize, and edit an existing form field directly in the PDF Viewer using t ![Moving and resizing a form field](../../javascript-es6/images/move-resize-forms.gif) - Edit a field by selecting it to open the Form Field Properties popover. The popover allows modification of form field and widget annotation properties. Changes are reflected immediately in the viewer and saved when the properties popover is closed. -For more information, see Editing Form Fields +For more information, see [Editing Form Fields](./manage-form-fields/modify-form-fields). ## Deleting form fields diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-field-events.md index 223ab59cd1..40a84f8f22 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-field-events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-field-events.md @@ -49,7 +49,7 @@ Form field events can be used to: You can wire up form field events on the PDF Viewer instance to execute custom logic when specific actions occur. ```js -var pdfviewer = new PdfViewer({ +var pdfviewer = new ej.pdfviewer.PdfViewer({ // Basic examples for common form-field events formFieldAdd: function (args) { console.log('formFieldAdd', args); }, formFieldRemove: function (args) { console.log('formFieldRemove', args); }, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-fields-api.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-fields-api.md index 7621eff181..4c45f61866 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-fields-api.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-fields-api.md @@ -39,7 +39,7 @@ Updates the value of one or more form fields programmatically. ``` {% tabs %} {% highlight js tabtitle="index.js" %} -var btn = document.getElementById('updateFormFields'); +var btn = document.getElementById('updateFormFieldsValue'); if (btn) { btn.onclick = function () { // Retrieve form fields collection @@ -218,7 +218,7 @@ Clears values of specified or all fields without removing the fields themselves. ``` {% tabs %} {% highlight js tabtitle="index.js" %} -var btn = document.getElementById('clearFormFields'); +var btn = document.getElementById('clearformfield'); if (btn) { btn.onclick = function () { var field = pdfviewer.retrieveFormFields(); @@ -248,8 +248,7 @@ if (element) { ## isFormDesignerToolbarVisible -Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially -and get the form designer Toolbar Visible status. +Gets whether the Form Designer toolbar is currently visible. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -320,4 +319,4 @@ pdfviewer.enableFormDesignerToolbar(true); // show - [Group form fields](./group-form-fields) - [Add custom data to form fields](./custom-data) - [Form Constrain](./form-constrain) -- [Form fields Validation](./form-validation) \ No newline at end of file +- [Form Validation](./form-validation) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md index b9c8abf22e..16c3f0da93 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md @@ -37,7 +37,7 @@ The following example demonstrates how to update PDF form field values programma // Wire up the button click document.getElementById('updateBtn').onclick = function () { // Retrieve form fields - var fields = pdfviewer.retrieveFormFields?.() || pdfviewer.formFieldCollection || []; + var fields = pdfviewer.retrieveFormFields() || []; // Get form fields by name var field = fields.find(function (f) { return f && f.name === 'name'; }) || fields[0]; @@ -73,8 +73,9 @@ Imported form field data is automatically mapped to the corresponding form field ``` ```js document.getElementById('importJson').addEventListener('click', function () { + // Ensure the viewer instance (var pdfviewer = new ej.pdfviewer.PdfViewer({ ... })) is created and appended before this code runs. // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', FormFieldDataFormat.Json); + pdfviewer.importFormFields('File', 'Json'); }); ``` @@ -132,7 +133,7 @@ pdfviewer.validateFormFields = function (args) { - [Form Designer overview](./overview) - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) - [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/customize-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields -- [Edit form fields](./manage-form-fields/edit-form-fields) +- [Edit form fields](./manage-form-fields/modify-form-fields) - [Group form fields](./group-form-fields) - [Add custom data to form fields](./custom-data) - [Form Constrain](./form-constrain) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/group-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/group-form-fields.md index 974103c594..48c53be538 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/group-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/group-form-fields.md @@ -100,7 +100,7 @@ pdfviewer.documentLoad = function () { ## See also -- [Form Designer overview](../overview) +- [Form Designer overview](./overview) - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) - [Create form fields](./manage-form-fields/create-form-fields) - [Modify form fields](./manage-form-fields/modify-form-fields) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-export-events.md index 0f8a8faee0..efb46feabe 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-export-events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-export-events.md @@ -78,5 +78,4 @@ viewer.exportFailed = function (args) { - [Add custom data to form fields](../custom-data) - [Import form fields](./import-form-fields) - [Export form fields](./export-form-fields) -- [Form validation](../form-validation) - [Form fields API](../form-fields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-form-fields.md index 0849db4d90..7460ddd99b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-form-fields.md @@ -30,7 +30,7 @@ N> For server-backed viewers, set `serviceUrl` before importing. The method trig ```js document.getElementById('importFdf').addEventListener('click', function () { // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', 'Fdf'); + viewer.importFormFields('formData.fdf', 'Fdf'); }); ``` @@ -43,7 +43,7 @@ document.getElementById('importFdf').addEventListener('click', function () { ```js document.getElementById('importXfdf').addEventListener('click', function () { // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', 'Xfdf'); + viewer.importFormFields('formData.xfdf', 'Xfdf'); }); ``` @@ -55,7 +55,7 @@ document.getElementById('importXfdf').addEventListener('click', function () { ```js document.getElementById('importJson').addEventListener('click', function () { // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', 'Json'); + viewer.importFormFields('formData.json', 'Json'); }); ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/create-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/create-form-fields.md index 7be1dcc362..2fce7cd644 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/create-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/create-form-fields.md @@ -253,7 +253,7 @@ document.getElementById('addPasswordField').addEventListener('click', function ( - [Form Designer overview](../overview) - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) - [Modify form fields](./modify-form-fields) -- [Style form fields](./style-form-fields) +- [Style form fields](./customize-form-fields) - [Remove form fields](./remove-form-fields) - [Group form fields](../group-form-fields) - [Form validation](../form-validation)