Line Annotation

A line annotation displays a single straight line on the page. When opened, the annotation displays a pop-up window containing the associated note.

Use the LineAnnotation class to add line annotations to a PDF document.

Note: The examples on this page use helper functions from the Snippet Helpers module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API.

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

const rc = { x: 50, y: 50, width: 250, height: 50 };
const layout = new Layout({
    runs: [{
        text: "A line annotation is drawn around this note which illustates the effect of including " +
            "leader lines and caption in a line annotation",
        font: Font.getPdfFont(StandardPdfFont.Times),
        fontSize: 11
    }],
    maxWidth: rc.width,
    maxHeight: rc.height
});
page.context.drawLayout(layout, rc.x, rc.y);

//Create and add LineAnnotation using 'json' syntax
page.annotations.add({
    type: 'line',
    userName: 'Jaime Smith',
    start: { x: rc.x, y: rc.y + rc.height },
    end: { x: rc.x + rc.width, y: rc.y + rc.height },
    lineWidth: 3,
    color: "Red",
    leaderLinesLength: -15,
    leaderLinesExtension: 5,
    leaderLineOffset: 10,
    contents: "Line annotation",
    verticalTextOffset: -20,
    textPosition: LineAnnotationTextPosition.Inline,
})


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