Zoom in and Zoom Out Custom signature coordinates postion changed

[Jayaseelan A]

Hi,
 we are create sample application for signature in the webviewer HTML5.They are two options to create signature,
 1.FreeHand tool(default annotation tool)
 2.Custom signature
 
 We are facing some issue related to Custom signature.
 my requirement append text(Custom signature) on webviewer canvas,we draw text on the canvas detect a mouse click event to get the X and Y coordinates when a user left clicks on the canvas.but When we click zoom in and out the text(Custom signature) will be change/hide(coordinates points) on the document.

 How do I get the the X and Y coordinates?
 Can you provide me with sample code to create (and display) custom annotations?
 
 sample code:
                canvas = document.getElementById('myCanvas');
                context = canvas.getContext('2d');             
                canvas.addEventListener('click', function (evt) {
                            var rect = canvas.getBoundingClientRect();
                            var mousePos = getMousePos(canvas, evt);                         
                            x= evt.clientX - rect.left,
                            y= evt.clientY - rect.top
                            var fontstyle = "28pt Brush Script MT";
                            var text = $('#hdtext').val();
                            var context = canvas.getContext('2d');
                            context.font = fontstyle;
                            context.fillStyle = 'black';                           
                            context.fillText(text, x, y);                     
                        
                }, false);
 
 I'm having trouble on custom signature.please help me ASAP.
 
please refer source code and image attachement.

https://drive.google.com/folderview?id=0B4452hNq_EqrNTBwZkNoTS1WYVE&usp=sharing

 Note: Freehand tool is works great.

[Matt Parizeau]

Hi Jayaseelan,

Thanks for sending the sample project. I would recommend taking advantage of the custom annotation framework and custom tools so that you don't have to create an extra canvas and calculate the location of the mouse yourself. If you create the signatures as custom annotations then they will automatically be drawn in the correct location.

Here's an example which creates a custom annotation using a custom tool:

var CustomSignatureAnnotation = function() {
    Annotations.MarkupAnnotation.call(this);
    this.text = 'Test Signature';
    this.font = '28pt Brush Script MT';
};

CustomSignatureAnnotation.prototype = $.extend(new Annotations.MarkupAnnotation(), {
    elementname: 'custom-signature',

    draw: function(ctx) {
        ctx.translate(this.X, this.Y);
        ctx.textBaseline = 'top';
        ctx.font = this.font;
        ctx.fillStyle = 'black';
        ctx.fillText(this.text, 0, 0);
    }
});

var SignatureTool = function(docViewer) {
    Tools.GenericAnnotationCreateTool.call(this, docViewer, CustomSignatureAnnotation);
};

SignatureTool.prototype = $.extend(new Tools.GenericAnnotationCreateTool(), {
    mouseLeftDown: function() {
        Tools.GenericAnnotationCreateTool.prototype.mouseLeftDown.apply(this, arguments);
        if (this.annotation) {
            this.annotation.font = currentFont;
            this.annotation.text = currentText;
            var annotManager = this.docViewer.GetAnnotationManager();
            annotManager.AddAnnotation(this.annotation);
            annotManager.DrawAnnotations(this.annotation.PageNumber);

            this.annotation = null;
        }
    }
});

Then just set the tool mode to the signature tool when you want to create a signature: 

readerControl.docViewer.SetToolMode(SignatureTool)

I updated your ReaderControl.html with a quick implementation and have attached it here. You'll probably want to clean it up some more and remove the use of your extra canvas.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jayaseelan A]

Matt Parizeau, thanks a lot.Its working....

[Jayaseelan A]

Matt,

I have one more scenario for custom signature,stored custom signature annotation strings into database and display custom signature on the document.

how to load custom signature(Annotation string) on the documents?

plz help me ASAP.

On Monday, January 5, 2015 5:30:40 PM UTC+5:30, Jayaseelan A wrote:

[Matt Parizeau]

Hi Jayaseelan,

You could save and load your annotation strings by overriding the serialize and deserialize functions on your custom annotation. The serialize function is called on the annotation when annotations are being saved and deserialize is called when loading from XFDF. The custom annotation sample included in the WebViewer download package shows how to save and load a custom attribute. I'll paste the relevant code here:

serialize: function(element, pageMatrix) {
    var el = Annotations.MarkupAnnotation.prototype.serialize.call(this, element, pageMatrix);
    $(el).attr("myattribute", this.myCustomAttribute);
    return el;
},
deserialize: function(element, pageMatrix) {
    Annotations.MarkupAnnotation.prototype.deserialize.call(this, element, pageMatrix);
    this.myCustomAttribute = $(element).attr("myattribute");
},

So you can modify this to save and load whatever attributes you want, like the text and the font.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jayaseelan A]

Matt,
Step1,
We draw three annotation(Underline,textstrikeout and Custom Diamond) and save annoation string into hidden value as given below,

<input id="Hidden1" type="hidden" value='<?xml version="1.0" encoding="UTF-8" ?>  <xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">  <fields>  <field name="c1-1">  <value>Off</value>  </field>  <field name="c1-2">  <value>Off</value>  </field>  <field name="c1-3">  <value>Off</value>  </field>  <field name="f1-1">  <value>  </value>  </field>  <field name="f1-2">  <value>  </value>  </field>  <field name="f1-3">  <value>  </value>  </field>  <field name="f1-4">  <value>  </value>  </field>  <field name="f1-5">  <value>John Smith</value>  </field>  <field name="f1-6">  <value>  </value>  </field>  <field name="f1-7">  <value>  </value>  </field>  <field name="f1-8">  <value>  </value>  </field>  <field name="f1-9">  <value>  </value>  </field>  <field name="f1-10">  <value>  </value>  </field>  <field name="f1-11">  <value>  </value>  </field>  <field name="f1-12">  <value>  </value>  </field>  <field name="f1-13">  <value>  </value>  </field>  <field name="f1-14">  <value>  </value>  </field>  <field name="f1-15">  <value>  </value>  </field>  <field name="f1-16">  <value>  </value>  </field>  <field name="f1-17">  <value>  </value>  </field>  <field name="f1-18">  <value>  </value>  </field>  <field name="f1-19">  <value>  </value>  </field>  <field name="c1-4">  <value>Off</value>  </field>  <field name="c1-5">  <value>Off</value>  </field>  <field name="c1-6">  <value>Off</value>  </field>  <field name="f1-20">  <value>  </value>  </field>  <field name="f1-21">  <value>  </value>  </field>  <field name="f1-22">  <value>  </value>  </field>  <field name="f1-23">  <value>  </value>  </field>  <field name="f1-24">  <value>  </value>  </field>  <field name="f1-25">  <value>  </value>  </field>  <field name="f1-26">  <value>  </value>  </field>  <field name="f1-27">  <value>  </value>  </field>  <field name="f1-28">  <value>  </value>  </field>  <field name="f1-29">  <value>  </value>  </field>  <field name="f1-30">  <value>  </value>  </field>  <field name="f1-31">  <value>  </value>  </field>  <field name="Button1">  <value>  </value>  </field>  </fields>  <annots>  <underline title="Guest" name="7b218f20-e996-8532-6885-514a43df17d8" rect="111.62,646.13,249.41,654.31" page="0" coords="111.62,654.31,249.41,654.31,111.62,646.13,249.41,646.13" creationdate="D:20150122180955+05" color="#FF0000" date="D:20150122180956+05" subject="Underline"><popup rect="29.72,661.2,179.72,736.2" page="0" flags="print,nozoom,norotate" open="no" /></underline>  <strikeout title="Guest" name="e60a09b0-9393-9904-927d-71b825c093f5" rect="222.23,670.13,338.66,678.31" page="0" coords="222.23,678.31,338.66,678.31,222.23,670.13,338.66,670.13" creationdate="D:20150122180958+05" color="#FF0000" date="D:20150122181000+05" subject="Strikeout"><contents-richtext><body xmlns="http://www.w3.org/1999/xhtml" xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/" xfa:spec="2.0.2" xfa:APIVersion="Acrobat:10.1.3"><p dir="ltr"><span style="text-align: left; color: rgb(0, 0, 0); font-size: 10pt; font-style: normal; font-weight: normal;" dir="ltr">sdada</span></p></body></contents-richtext><contents>sdada</contents><popup rect="140.33,685.75,290.33,760.75" page="0" flags="print,nozoom,norotate" open="no" /></strikeout>  <custom-diamond title="Guest" name="773f4a99-c9d2-6780-acc0-e68dc4cb17bf" rect="13.1,605.83,39.31,672.44" page="0" creationdate="D:20150122181211+05" color="#000000" date="D:20150122181212+05" subject="Custom Diamond" width="1" myattribute="customValue"><popup rect="0,679.33,150,754.33" page="0" flags="print,nozoom,norotate" open="no" /></custom-diamond>  <widget xmlns="http://ns.adobe.com/xfdf/" title="c1-1" rect="54.999700,671.001000,63.332900,680.167000" page="0" N="Yes" FontSize="9" FontName="ZapfDingbats" Ff="0" FT="Btn" flags="print" defaultappearance="/ZaDb 9 Tf 0 0 0.627 rg" ButtonLabel="4" v="Off">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="c1-2" rect="443.331000,647.668000,452.497000,656.001000" page="0" N="Yes" FontSize="9" FontName="ZapfDingbats" Ff="0" FT="Btn" flags="print" defaultappearance="/ZaDb 9 Tf 0 0 0.627 rg" ButtonLabel="4" v="Off">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="c1-3" rect="54.999700,623.501000,63.332900,631.834000" page="0" N="Yes" FontSize="9" FontName="ZapfDingbats" Ff="0" FT="Btn" flags="print" defaultappearance="/ZaDb 9 Tf 0 0 0.627 rg" ButtonLabel="4" v="Off">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-1" rect="153.332000,589.335000,334.998000,606.834000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-2" rect="444.164000,589.335000,471.664000,608.501000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-3" rect="474.164000,589.335000,514.997000,608.501000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-4" rect="517.497000,589.335000,566.663000,608.501000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-5" rect="60.833000,552.668000,428.331000,573.501000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg" V="John Smith">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-6" rect="444.164000,552.668000,471.664000,570.168000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-7" rect="474.164000,552.668000,514.997000,570.168000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-8" rect="517.497000,552.668000,566.663000,570.168000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-9" rect="60.833000,516.835000,428.331000,536.835000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-10" rect="445.831000,516.835000,471.664000,535.168000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-11" rect="474.164000,516.835000,514.997000,535.168000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-12" rect="517.497000,516.835000,566.663000,535.168000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-13" rect="61.666300,481.002000,566.663000,503.502000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-14" rect="61.666300,445.169000,514.997000,468.502000" page="0" FontSize="9" FontName="Helvetica-Bold" Ff="4096" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-15" rect="517.497000,445.169000,565.830000,469.335000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-16" rect="61.666300,409.336000,514.997000,432.669000" page="0" FontSize="9" FontName="Helvetica-Bold" Ff="4096" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-17" rect="517.497000,409.336000,565.830000,433.502000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-18" rect="60.833000,372.669000,514.997000,396.836000" page="0" FontSize="9" FontName="Helvetica-Bold" Ff="4096" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-19" rect="517.497000,372.669000,564.997000,396.002000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="c1-4" rect="54.999700,335.169000,63.332900,344.336000" page="0" N="Yes" FontSize="9" FontName="ZapfDingbats" Ff="0" FT="Btn" flags="print" defaultappearance="/ZaDb 9 Tf 0 0 0.627 rg" ButtonLabel="4" v="Off">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="c1-5" rect="54.999700,325.169000,63.332900,333.503000" page="0" N="Yes" FontSize="9" FontName="ZapfDingbats" Ff="0" FT="Btn" flags="print" defaultappearance="/ZaDb 9 Tf 0 0 0.627 rg" ButtonLabel="4" v="Off">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="c1-6" rect="54.999700,313.503000,63.332900,321.836000" page="0" N="Yes" FontSize="9" FontName="ZapfDingbats" Ff="0" FT="Btn" flags="print" defaultappearance="/ZaDb 9 Tf 0 0 0.627 rg" ButtonLabel="4" v="Off">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-20" rect="59.166300,276.836000,428.331000,298.503000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-21" rect="430.831000,276.836000,457.497000,297.670000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-22" rect="459.997000,276.836000,566.663000,297.670000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-23" rect="60.833000,241.003000,497.497000,265.170000" page="0" FontSize="9" FontName="Helvetica-Bold" Ff="4096" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-24" rect="505.830000,241.003000,566.663000,266.003000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-25" rect="61.666300,205.170000,497.497000,228.503000" page="0" FontSize="9" FontName="Helvetica-Bold" Ff="4096" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-26" rect="505.830000,205.170000,564.997000,230.170000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-27" rect="62.499600,169.337000,497.497000,192.670000" page="0" FontSize="9" FontName="Helvetica-Bold" Ff="4096" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-28" rect="506.664000,169.337000,564.997000,195.170000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-29" rect="287.498000,132.671000,311.665000,146.837000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-30" rect="314.998000,132.671000,408.331000,146.837000" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="f1-31" rect="354.998000,72.671100,566.663000,89.337600" page="0" FontSize="9" FontName="Helvetica-Bold" FT="Tx" flags="print" defaultappearance="/HeBo 9 Tf 0 0 0.627 rg">  </widget>  <widget xmlns="http://ns.adobe.com/xfdf/" title="Button1" rect="496.138000,17.120500,568.138000,37.120500" page="0" FontSize="12" FontName="Helvetica-Bold" Ff="65536" FT="Btn" flags="print" defaultappearance="/HeBo 12 Tf 0 g" ButtonLabel="Submit" BG="0.752930" SubmitURL="formDataHandler.php" ActionType="SubmitForm">  </widget>  </annots>  <pages>  <defmtx matrix="1.333333,0,0,-1.333333,0,1056" />  </pages>  </xfdf>' />
Step2,
Load annotation string into document in ReadearControl.js file code,
onDocumentLoaded: function () {
.....
var am = me.docViewer.GetAnnotationManager();
var test = $('#Hidden1').val();
am.ImportAnnotationsAsync(test);

});

Annotation underline,textstrikeout is loaded on viewer,But the Custom Diamond annotation is not loaded on document viewer.

i have attached readercontrol.html and readercontrol.js file for your reference.

Please help me ASAP

Thanks

[Matt Parizeau]

Hi Jayaseelan,

Thanks for sending the ReaderControl files. The problem is occurring because the annotations are being imported before the custom diamond annotation has been registered with the AnnotationManager.

To make sure that the diamond annotation has been registered first you can one of two things:

-Move the registering to the viewerLoaded event which will happen before documentLoaded.

$(document).on('viewerLoaded', function() {

    var am = readerControl.getDocumentViewer().GetAnnotationManager();

    //register Annotation for serialization

    am.registerAnnotationType("custom-diamond", CustomDiamondAnnotation);

    //register ToolMode for ReaderControl UI

    readerControl.toolModeMap['AnnotationCreateCustomDiamond'] = CustomDiamondCreateTool;

});

OR

-In ReaderControl.js move the ImportAnnotationsAsync call to be just after me.fireEvent('documentLoaded')

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jayaseelan A]

Matt,
Its working,Thanks for sending the code.

On Monday, January 5, 2015 at 5:30:40 PM UTC+5:30, Jayaseelan A wrote: