Single click stamps annotation with SVG

247 views
Skip to first unread message

Vripiat

unread,
Apr 16, 2018, 1:28:40 AM4/16/18
to PDFTron PDFNet SDK
Looking to customize the HTML5 PDF viewer to allow stamp annotations. Basically when I select this annotation tool, I want to be able with a single click per stamp to quickly place a bunch of these predefined SVG drawing on a PDF.

Also need the SVG stamps to have the ability to be programmatically changed based on some internal states we have.

Any examples or set of examples available I can piece together to achieve this?

Matt Parizeau

unread,
Apr 20, 2018, 7:49:21 PM4/20/18
to PDFTron WebViewer
Here is an example that shows how to add a tool that creates custom stamps that base their appearance on an SVG element:

var container = document.createElement('div');
container.style.display = 'none';
document.body.appendChild(container);

var svgElement = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32"><circle fill="red" cx="16" cy="16" r="12"/></svg>';
container.innerHTML = svgElement;

var idToContainerMap = {
  'door': container
};

// when clicking the search button on the top toolbar the stars will change to have a blue fill
$('#searchButton').on('click', function() {
  container.querySelector('svg circle').setAttribute('fill', 'blue');
  refreshStamps();
});

function refreshStamps() {
  var annotManager = readerControl.docViewer.getAnnotationManager();
  var customStamps = annotManager.getAnnotationsList().filter(function(annot) {
    return annot instanceof CustomStampAnnotation;
  });
  customStamps.forEach(function(annot) {
    annot.refreshAnnot();
  });
  annotManager.drawAnnotationsFromList(customStamps);
}

var CustomStampSelectionModel = function() {
  Annotations.SelectionModel.apply(this, arguments);
};

CustomStampSelectionModel.prototype = new Annotations.BoxSelectionModel();
CustomStampSelectionModel.prototype.testSelection = function(annotation, x, y, pageMatrix) {
    return Annotations.SelectionAlgorithm.boundingRectTest(annotation, x, y);
};

var CustomStampAnnotation = function() {
  Annotations.StampAnnotation.apply(this, arguments);
  this.updateStampStyle('door');
};
CustomStampAnnotation.prototype = $.extend(new Annotations.StampAnnotation(), {
  selectionModel: CustomStampSelectionModel,
  updateStampStyle: function(stampId) {
    this.stampId = stampId;
    this.svgContainer = idToContainerMap[stampId];
    this.refreshAnnot();
  },
  refreshAnnot: function() {
    this.ImageData = encodeURI('data:image/svg+xml,' + this.svgContainer.innerHTML);
  },
  serialize: function(element, pageMatrix) {
    var el = Annotations.StampAnnotation.prototype.serialize.call(this, element, pageMatrix);
    $(el).attr('stampId', this.stampId);
    return el;
  },
  deserialize: function(element, pageMatrix) {
    Annotations.StampAnnotation.prototype.deserialize.call(this, element, pageMatrix);
    this.stampId = $(element).attr('stampId');
  },
});

var CustomStampCreateTool = function(docViewer) {
  Tools.GenericAnnotationCreateTool.call(this, docViewer, CustomStampAnnotation);
};
CustomStampCreateTool.prototype = new Tools.GenericAnnotationCreateTool();
CustomStampCreateTool.prototype.mouseLeftDown = function() {
  Tools.AnnotationSelectTool.prototype.mouseLeftDown.apply(this, arguments);
};
CustomStampCreateTool.prototype.mouseMove = function() {
  Tools.AnnotationSelectTool.prototype.mouseMove.apply(this, arguments);
};
CustomStampCreateTool.prototype.mouseLeftUp = function(e) {
  var annotation;
  Tools.GenericAnnotationCreateTool.prototype.mouseLeftDown.call(this, e);
  if (this.annotation) {
    this.annotation.Width = 100;
    this.annotation.Height = 100;
    this.annotation.X -= 50;
    this.annotation.Y -= 50;
    this.annotation.NoResize = true;
    annotation = this.annotation;
  }
  Tools.GenericAnnotationCreateTool.prototype.mouseLeftUp.call(this, e);
  if (annotation) {
    readerControl.docViewer.getAnnotationManager().redrawAnnotation(annotation);
  }
};

$(document).bind('documentLoaded', function() {
  $('#overflowToolsContainer').prepend('<span data-toolmode="AnnotationCreateCustomStamp" class="annotTool glyphicons" title="Custom Samp"><img src="../../samples/custom-annotations/annot_custom_stamp.png"/></span>');

  var am = readerControl.getDocumentViewer().getAnnotationManager();
  readerControl.toolModeMap['AnnotationCreateCustomStamp'] = new CustomStampCreateTool(readerControl.docViewer);
  readerControl.setToolMode('AnnotationCreateCustomStamp');
});

Matt Parizeau
Software Developer
PDFTron Systems Inc.
Reply all
Reply to author
Forward
0 new messages