How do I add clickable signature areas to a document?

68 views
Skip to first unread message

Justin Jung

unread,
Nov 20, 2017, 4:50:30 PM11/20/17
to PDFTron WebViewer
Q: How do I add clickable signature areas to a document?

A: You can add the following to config.js

$(document).on('documentLoaded', function() {
  // hide signature annotation tool button
  $('[data-toolmode="AnnotationCreateSignature"]').hide();

  // signature locations
  var rects = [
    { rect: new Annotations.Rect(0, 0, 200, 100), pageIndex: 0 },
    { rect: new Annotations.Rect(200, 200, 400, 300), pageIndex: 0 },
    { rect: new Annotations.Rect(400, 400, 600, 500), pageIndex: 0 },
    { rect: new Annotations.Rect(200, 200, 400, 300), pageIndex: 1 },
    { rect: new Annotations.Rect(400, 400, 600, 500), pageIndex: 1 },
  ];
  var annotManager = readerControl.docViewer.getAnnotationManager();
  var selectedRectData;

  // draw rectangle annotations to indicate the signature locations
  rects.forEach(function(data) {
    var rectAnnot = new Annotations.RectangleAnnotation();
    rectAnnot.PageNumber = data.pageIndex + 1;
    rectAnnot.setRect(data.rect);
    annotManager.addAnnotation(rectAnnot);
    annotManager.redrawAnnotation(rectAnnot);
  });

  readerControl.docViewer.on('mouseLeftDown', function(e, originalEvent) {
    var displayMode = readerControl.docViewer.getDisplayModeManager().getDisplayMode();
    var point = {
      x: originalEvent.pageX + $('#DocumentViewer').scrollLeft(),
      y: originalEvent.pageY + $('#DocumentViewer').scrollTop(),
    };
    var pageIndex = displayMode.getSelectedPages(point, point).first;
    var pageCoordinate = displayMode.windowToPage(point, pageIndex);
    for (var i=0; i<rects.length; i++) {
      var rectData = rects[i];
      var rect = rectData.rect;
      // if we are clicking on a signature box
      if (rectData.pageIndex === pageIndex && pageCoordinate.x > rect.x1 && pageCoordinate.x < rect.x2 && pageCoordinate.y > rect.y1 && pageCoordinate.y < rect.y2) {
        readerControl.setToolMode('AnnotationCreateSignature');
        var signatureTool = readerControl.docViewer.getToolMode();
        signatureTool.mouseLeftDown(originalEvent);
        signatureTool.mouseLeftUp(originalEvent);
        selectedRectData = rectData;
        break;
      }
    }
  });

  $('#signatureDialog').on('dialogclose', function( event, ui ) {
    readerControl.setToolMode('AnnotationEdit');
  });

  var signatureTool = readerControl.docViewer.getTool('AnnotationCreateSignature');
  signatureTool.on('annotationAdded', function(e, annotation) {
    var annotRect = annotation.getRect();
    var annotWidth = annotRect.x2 - annotRect.x1;
    var annotHeight = annotRect.y2 - annotRect.y1;

    var selectedRect = selectedRectData.rect;
    if (selectedRectData.annotation) {
      annotManager.deleteAnnotation(selectedRectData.annotation);
    }
    selectedRectData.annotation = annotation;

    // fit the signature to the signature box
    var boxWidth = selectedRect.x2 - selectedRect.x1;
    var boxHeight = selectedRect.y2 - selectedRect.y1;

    var hRatio = annotWidth / boxWidth;
    var vRatio = annotHeight / boxHeight;
    var ratio = Math.max(hRatio, vRatio);

    var newWidth = annotWidth / ratio;
    var newHeight = annotHeight / ratio;
    var x1 = selectedRect.x1 + ((boxWidth - newWidth) / 2);
    var y1 = selectedRect.y1 + ((boxHeight - newHeight) / 2);
    var x2 = x1 + newWidth;
    var y2 = y1 + newHeight;

    annotation.resize(new Annotations.Rect(x1, y1, x2, y2));
    annotManager.redrawAnnotation(annotation);
  });
});
Reply all
Reply to author
Forward
0 new messages