Polyline Annotation

A polyline annotation displays a series of connected line segments on the page. The shape can consist of multiple edges defined by a set of points. When activated, the annotation displays a pop-up window containing the associated note.

Use the PolyLineAnnotation class to add polyline 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: 400, height: 40 };
const layout = new Layout({
    runs: [{
        text: "This sample demonstrates how you can create a polyline annotation.",
        font: Font.getPdfFont(StandardPdfFont.Times),
        fontSize: 14
    }],
    maxWidth: rc.width,
    maxHeight: rc.height
});
page.context.drawLayout(layout, rc.x, rc.y);

//define the points of the polyline
const points = [];
let x = rc.x, y = rc.y + rc.height;
for (let i = 0; i < 10 ; i++, x += 10)
{
    points.push({ x: x, y: y });
    y = i % 2 == 0 ? y - 10 : y + 10;
}

// Add PolyLineAnnotation using 'json' syntax
page.annotations.add({
    type: 'polyline',
    userName: 'Jaime Smith',
    lineWidth: 2,
    color: 'Green',
    contents: 'This is a polyline annotation',
    points: points
})


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