Tool to create a signature widget

[Matt Parizeau]

Q:

Is it possible to create a signature on the page by clicking and dragging?

A:

Here is code you can add to a config file to create a tool that adds a signature widget to the page. You could combine it with the code here that describes how to add a signature by typing https://groups.google.com/d/msg/pdfnet-webviewer/viIC8on6yhk/9O8oRMiZCQAJ

var createSignature = function(rectangleAnnot) {
  var annotManager = readerControl.docViewer.getAnnotationManager();
  var fieldManager = annotManager.getFieldManager();
  var pageNumber = rectangleAnnot.PageNumber;

  var field = new Annotations.Forms.Field('mysignature');

  var signatureWidget = new Annotations.SignatureWidgetAnnotation(field, {
    appearance: '_DEFAULT',
    appearances: {
      '_DEFAULT': {
        Normal: {

          data: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMzQDW3oAAAANSURBVBhXY2CY8r8KAAQ5Ag42MpV0AAAAAElFTkSuQmCC',

          offset: {}

        }
      }
    },
    page: pageNumber
  });
  signatureWidget.X = rectangleAnnot.X;
  signatureWidget.Y = rectangleAnnot.Y;
  signatureWidget.Width = rectangleAnnot.Width;
  signatureWidget.Height = rectangleAnnot.Height;

  annotManager.addAnnotation(signatureWidget);
  fieldManager.addField(field);
  annotManager.deleteAnnotation(rectangleAnnot);
  annotManager.drawAnnotations(pageNumber, null, true);
}

var CustomSignatureCreateTool = function() {
  Tools.RectangleCreateTool.apply(this, arguments);
};

CustomSignatureCreateTool.prototype = new Tools.RectangleCreateTool();

$(document).on('documentLoaded', function() {
  var customSignatureTool = new CustomSignatureCreateTool(readerControl.docViewer);
  readerControl.toolModeMap['CustomSignatureCreateTool'] = customSignatureTool;
  readerControl.setToolMode('CustomSignatureCreateTool');

  customSignatureTool.on('annotationAdded', function(e, rectangleAnnot) {
    createSignature(rectangleAnnot);
  });
});