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.