Square Annotation

A square annotation displays a rectangle or square on the page. When opened, the annotation displays a pop-up window containing the associated note. The shape of the annotation depends on the dimensions of its bounding rectangle, so it can appear as either a square or a rectangle.

Use the SquareAnnotation class to add square 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.

async function squareAnnotation() {
    pushObjectManager();

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

    let rc = { x: 50, y: 50, width: 250, height: 40 };
    const layout = new Layout({
        runs: [{
            text: "A square annotation drawn with a 3pt wide orange line around this note has a rich text " +
                "associated with it.",
            font: Font.getPdfFont(StandardPdfFont.Times),
            fontSize: 11
        }],
        maxWidth: rc.width,
        maxHeight: rc.height
    });
    page.context.drawLayout(layout, rc.x, rc.y);
    rc = Util.inflate(rc, 10, 10)

    //Create an instance of SquareAnnotation class and set its relevant properties
    const squareAnnot = new SquareAnnotation();
    squareAnnot.userName = "Jaime Smith";
    squareAnnot.rect = rc;
    squareAnnot.lineWidth = 3;
    squareAnnot.color = "Orange";
    squareAnnot.richText = "<body><p>This <b><i>rich text</i></b> is associated with the square annotation around a text note.</p></body>";
    page.annotations.add(squareAnnot); //Add the square annotation

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