Adding a signature to a pre-defined signature field

210 views
Skip to first unread message

Euan Carmichael

unread,
Jun 25, 2018, 5:41:04 PM6/25/18
to pdfnet-w...@googlegroups.com
Q: Is it possible to click on a signature widget in a document and then enter an ink signature?

A: Yes, this would be possible by leveraging the existing signature tool and embedding the image generated within the signature widget.  This code should help you get started, you can add it in a config file and it will be called once the viewerLoaded event is hit.

var createInnerElement = Annotations.SignatureWidgetAnnotation.prototype.createInnerElement;
Annotations.SignatureWidgetAnnotation.prototype.createInnerElement = function() {
  var el = createInnerElement.apply(this, arguments);

  var signatureWidget = this;
  el.on('click', function(e) {
    readerControl.setToolMode('AnnotationCreateSignature');

    var signatureTool = readerControl.docViewer.getToolMode();
    // trigger a click from the signature tool
    signatureTool.mouseLeftDown(e);
    signatureTool.mouseLeftUp(e);

    signatureTool.one('annotationAdded', function(e, signatureAnnot) {
      // positioning and scaling signature annotation to go inside widget
      var height = signatureWidget.Height;
      var width = signatureWidget.Width;
      var x = signatureWidget.getRect().x1;
      var y = signatureWidget.getRect().y1;

      var hScale = 1;
      var wScale = 1;
      hScale = height / signatureAnnot.Height;
      wScale = width / signatureAnnot.Width;
      var scale = Math.min(hScale, wScale);

      signatureAnnot.Width = width;
      signatureAnnot.Height = height;

      var h, i;
      for (h = 0; h < signatureAnnot.getPaths().length; h++) {
        for (i = 0; i < signatureAnnot.getPaths()[h].length; i++) {
          signatureAnnot.getPaths()[h][i].x = (signatureAnnot.getPaths()[h][i].x - signatureAnnot.X) * scale + x;
          signatureAnnot.getPaths()[h][i].y = (signatureAnnot.getPaths()[h][i].y - signatureAnnot.Y) * scale + y;
        }
      }

      signatureAnnot.X = x;
      signatureAnnot.Y = y;

      var annotManager = readerControl.docViewer.getAnnotationManager();

      // delete any signatures that were added previously
      annotManager.getAnnotationsList().forEach(function(annot) {
        if (annot !== signatureAnnot && annot instanceof Annotations.FreeHandAnnotation && annot.X === signatureAnnot.X && annot.Y === signatureAnnot.Y) {
          annotManager.deleteAnnotation(annot);
        }
      });

      annotManager.drawAnnotations(signatureAnnot.PageNumber);
    });

  });
  return el;
};


Matt Parizeau

unread,
Dec 20, 2018, 3:38:33 PM12/20/18
to pdfnet-w...@googlegroups.com
Another example. This code snippet will display "Sign here" on unfilled signatures which is removed once the field is filled:

var createInnerElement = Annotations.SignatureWidgetAnnotation.prototype.createInnerElement;
Annotations.SignatureWidgetAnnotation.prototype.createInnerElement = function() {
 
var el = createInnerElement.apply(this, arguments);

 
var signatureWidget = this;
  el
.on('click', function(e) {
    readerControl
.setToolMode('AnnotationCreateSignature');

   
var signatureTool = readerControl.docViewer.getToolMode();
   
// trigger a click from the signature tool
    signatureTool
.mouseLeftDown(e);
    signatureTool
.mouseLeftUp(e);

    signatureTool
.one('annotationAdded', function(e, signatureAnnot) {

      signatureWidget
.Custom = 'filled';

      readerControl.setToolMode('AnnotationEdit');
    });
 
});
 
return el;
};

Annotations.SignatureWidgetAnnotation.prototype.draw = function(ctx) {
  
if (this.Custom !== 'filled') {
    ctx
.rect(this.X, this.Y, this.Width / 4, this.Height / 2);
    ctx
.lineWidth = 2;
    ctx
.stroke();
    ctx
.textBaseline = 'top';
    ctx
.fillText('Sign Here', this.X, this.Y);
  
}
};

Reply all
Reply to author
Forward
0 new messages