stamp examples

[Perry Manole]

Are there any code examples of how to implement a stamp annotation tool?

1. One stamp tool we need is a stamp that simply overlays a small PNG file and can be re-sized. We need to provide a global stamp set for all users to use.

2. Another stamp like feature we need is a shape like a circle, square, hexagon, etc. containing a dynamic number in its center where every time the user places this stamp the number increments. The settled number should be able to be edited post placement as well as the base current number. This is very common for blue print take offs.

[Matt Parizeau]

We have a sample for creating custom annotations that creates a custom diamond annotation and tool but you should be able to adapt it for your cases.  The relevant code is in the WebViewer download under samples/custom-annotations/diamond.js.

1) For your stamp tool you probably don't need any of the custom selection model and control handle code so you can ignore all that for now.  To have basic rectangular selection you can look at CustomDiamondAnnotation.prototype and change the selectionModel property to Annotations.BoxSelectionModel.  Now to draw an image you just have to change the draw function.  Assuming that you have an image object from somewhere else you can just change the draw code to: ctx.drawImage(myImage, this.X, this.Y, this.Width, this.Height).  This will draw the image and allow you to change its size.

2) For this feature you could create as many custom annotations and tools as you require.  To have a dynamic number for these annotations you could set a property on the prototype of the annotation that increases whenever a new annotation is created (i.e. the constructor is called) and each individual annotation will save it's own copy of the property.

For example on CustomDiamondAnnotation.prototype you could add the property index: 1.  In the CustomDiamondAnnotation constructor you could have the code:

this.myIndex = this.index;
CustomDiamondAnnotation.prototype.index++;

So you've saved the index for each annotation in myIndex and in the draw function you can draw myIndex as you like.  If you want to change an individual annotation's number then just change their myIndex property and if you want to change the base current number just change CustomDiamondAnnotation.prototype.index.

To be able to save any custom properties you'll need to modify the serialize and deserialize functions so that your properties will be saved and reloaded to and from XFDF.

Matt Parizeau

Software Developer

PDFTron Systems Inc.