Written by Pravin Joshua
Essential PDF Viewer for WPF has virtual ink that can be used to annotate digital documents—a feature that will play a vital role in how touch devices are used in the workplace. Similar to traditional methods involving a pen and printed paper, ink annotations represent a freehand scribble composed of one or more disjointed paths. They contain a collection of x and y coordinates that are connected by lines; when double clicked, they display a pop-up window containing an associated note.
The screenshot below shows a simple PDF document annotated with virtual ink.
By combining features of the Essential PDF and Essential PDF Viewer libraries, PDF documents can be annotated in a WPF application. The application can also be customized to accept touch input, the most efficient way to annotate with ink.
The following screenshot shows an application designed for document annotation that was created using Syncfusion WPF components.
Two major steps are required to achieve virtual annotations in an application:
1. Displaying PDF documents in a WPF application.
2. Adding strokes and saving the document to disc.
Syncfusion’s WPF studio provides a simple, high-performance PDF Viewer component. Since annotations cannot be added directly, each page has to be exported as a bitmap source, which can be bound to an image viewer or added as a background for the canvas. The following code snippet exports pages as images:
| PdfDocumentView viewer = newPdfDocumentView(); //Load the instance of a PdfLoadedDocument object. viewer.Load(ldoc); //Export the first page as BitmapSource. BitmapSource source = viewer.ExportAsImage(0); |
The following code snippet explains how to add an ink annotation to a PDF document and savethe annotation to disc.
| //Set ink annotation properties. PdfInkAnnotationinkAnnot = newPdfInkAnnotation(newRectangleF(0, 0, pageWidth, pageHeight), inkPoints); inkAnnot.BorderWidth = width; inkAnnot.Color = newPdfColor(255, 0, 0); //Add ink annotation to the PDF document. ldoc.Pages[pageIndex].Annotations.Add(inkAnnot); //Save and dispose the loaded document. ldoc.Save(fileName); ldoc.Close(true); |
Points to remember
1. In a PDF, all distances and coordinates are measured in points. However, in WPF surfaces or controls, they are measured in pixels. So, the stroke coordinates should be converted into points before adding them to the PDF document and vice versa. The PDF library itself has a converter function that does this.
| //Convert PDF page units to pixels. PdfUnitConvertor converter = newPdfUnitConvertor(); floatpageWidth = converter.ConvertToPixels(ldoc.Pages[0].Size.Width, PdfGraphicsUnit.Point); floatpageHeight = converter.ConvertToPixels(ldoc.Pages[0].Size.Height, PdfGraphicsUnit.Point); |
2. In a PDF, annotations are drawn from the bottom. The bottom left corner is the origin (0, 0); hence, all the coordinates will be manually transferred to the top. The following code snippet explains this:
| PdfUnitConvertor converter = newPdfUnitConvertor(); //Y-value is calculated from the bottom of the PDF page. inkPoints.Add(converter.ConvertFromPixels(pageHeight, PdfGraphicsUnit.Point) – (converter.ConvertFromPixels((float)sylusPoint.Y, PdfGraphicsUnit.Point))); |
This sample uses an ink canvas at the top layer and an image of the PDF page for the background. The strokes collected from the canvas are then transformed to the equivalent PDF metrics, and then the document can be saved to disc.
You can download the sample from the following link:
https://www.syncfusion.com/uploads/user/directTrac/109246/InkAnnotate-1640637250.zip