Adding annotations on PDFDraw for Windows Store apps using Javascript

[Tomas Hofmann]

Q:

I am developing a PDFViewer for Windows Store apps, using Javascript. I would like to add the ability to draw and manipulate annotations, similar to the PDFViewCtrlTools for C#. How would I go about this?

****************************************************************

A:

Annotations in Javascript uses the same API as annotations for C#. So creating an annotation is the same. 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);

To actually draw an annotation, you would have to create a more complicated procedure. Attached to this post is a zip with a PDFDrawDemo is javascript that can add a green line.

A quick overview of the procedure is as follows:

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.