Adding a signature to a pre-defined signature field

[Euan Carmichael]

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]

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);
  }
};