Q: I am looking at the PDFDrawDemoJS which shows how to render and display a PDF, but I am interested in creating interactive annotation features. How can I draw an annotation and add it to the PDFDoc as an annotation.
Assuming you have a PDFDoc labeled pdfDoc, you can do the following to create a line:
var SDFDoc = pdfDoc.getSDFDoc();
var rect = pdftron.PDF.Rect(100, 100, 200, 300);
var annot = pdftron.PDF.Annots.Line.create(SDFDoc, rect);
annot.setEndStyle(pdftron.PDF.Annots.LineEndingStyle.e_ClosedArrow);
annot.setColor(pdftron.PDF.ColorPt(0.66, 0.33, 0.15));
annot.setOpacity(0.5);
annot.setStartStyle(pdftron.PDF.Annots.LineEndingStyle.e_Square);
annot.refreshAppearance();
page.annotPushBack(annot);
Of course, drawing an annotation interactively is more complicated:
Attached is a modifed version of the PDFDrawDemoJS.
A quick explanation of the drawing procedure:
The screen contains an image element and a canvas element (slightly red tint to make it easier to see).
The canvas overlays the image, so we can use it for interaction and to draw on “top” of the image.
When a click or touch is detected, we record the start point both in canvas and in image coordinates.
When a drag happens, we start drawing on the canvas from the start point to the point where we’re dragging to.
When a release happens, we have to translate the start and end points into page coordinates. We do this by computing their percentages in the x and y direction and then applying those percentages to the page’s height and width (keeping in mind that the page’s 0,0 coordinate is at bottom left).
We then create an annotation using these coordinates, push it back and finally ask for a redraw. When the new image is ready, we will remove the line from the canvas.
Keep in mind that this sample doesn’t check bounds when dragging or handles things like pointer capture lost or so. But it should take care of the PDF specific issues and the rest should be regular app development.
The way that we translate between image and page coordinates will work for anything else as well, such as detecting if you’ve tapped on an annotation or so.
A: Annotations is javascript use the same API as annotations in C#.