Ink Annotation

An ink annotation represents a freehand scribble composed of one or more disjoint paths. When opened, the annotation displays a pop-up window containing the associated note.

The drawing is defined by specifying one or more paths through the paths property.

Use the InkAnnotation class to add ink annotations to a PDF document.

const doc = new PdfDocument();
const page = doc.newPage();

let rc = { x: 50, y: 50, width: 250, height: 50 };
const layout = new Layout({
    runs: [{
        text: "This sample creates an ink annotation and shows how to use the " +
            "InkAnnotation.paths property",
        font: Font.getPdfFont(StandardPdfFont.Times),
        fontSize: 11
    }],
    maxWidth: rc.width,
    maxHeight: rc.height
});
page.context.drawLayout(layout, rc.x, rc.y);

//Create an instance of InkAnnotation class and set its relevant properties
const inkAnnot = new InkAnnotation();
inkAnnot.userName = "Jaime Smith";
inkAnnot.rect = { x: rc.x, y: rc.y + rc.height + 20, width: 72 * 5, height: 72 * 2 };
inkAnnot.lineWidth = 2;
inkAnnot.color = "DarkBlue";
inkAnnot.contents = "This is an ink annotation drawn via InkAnnotation.Paths."
let x = 80, y = rc.y + rc.height + 24, h = 18, dx = 2, dy = 4, dx2 = 4, w = 10, xoff = 15;

// Scribble 'ink annotation' text:
// i
const paths = [];
paths.push([
    { x: x + w / 2, y: y },
    { x: x + w / 2, y: y + h },
    { x: x + w, y: y + h * 0.7 }
]);
paths.push([
    { x: x + w / 2, y: y },
    { x: x + w / 2, y: y + h },
    { x: x + w, y: y + h * 0.7 }
]);
paths.push([
    { x: x + w / 2 - dx, y: y - h / 3 + dy },
    { x: x + w / 2 + dx, y: y - h / 3 }
]);
// n
x += xoff;
paths.push([
    { x: x, y: y },
    { x: x, y: y + h },
    { x: x, y: y + h - dy },
    { x: x + w * 0.7, y: y },
    { x: x + w - dx / 2, y: y + h * 0.6 },
    { x: x + w, y: y + h },
    { x: x + w + dx2, y: y + h * 0.7 }
]);
// k
x += xoff;
paths.push([
    { x: x, y: y - h / 3 },
    { x: x, y: y + h }
]);
paths.push([
    { x: x + w, y: y },
    { x: x + dx, y: y + h / 2 - dy },
    { x: x, y: y + h / 2 },
    { x: x + dx2, y: y + h / 2 + dy },
    { x: x + w, y: y + h },
    { x: x + w + dx2, y: y + h * 0.7 }
]);
inkAnnot.paths = paths;

page.annotations.add(inkAnnot);

const docData = doc.savePdf();
Util.saveFile("InkAnnotation.pdf", docData);