Drawing & Shapes#

Drawing#

Drawing freehand on a PDF is used to typically add scribbled notations and can be acheived by adding ink lists to an annotation of type Ink.

By using the following JavaScript methods you should be able to create and manage Ink annotations with the following API:

  • hasInkList.

  • getInkList.

  • setInkList.

  • clearInkList.

  • addInkListStroke.

  • addInkListStrokeVertex.

  • getBorderWidth.

  • setBorderWidth.

EXAMPLE

let fileData = fs.readFileSync("test.pdf")

let document = mupdf.Document.openDocument(fileData, "application/pdf")
let page = document.loadPage(0)
let annotation = page.createAnnotation("Ink")

annotation.setInkList([
    [
        [0,0]
    ],
    [
        [10,10], [20,20], [30,30]
    ],
    [
        [30,30], [55,20], [60,30]
    ]
])

annotation.update()

fs.writeFileSync("output-ink.pdf", document.saveToBuffer("incremental").asUint8Array())

Note

By default the color of an Ink annotation is red ([1,0,0]). Use PDFAnnotation.setColor to change it.

Shapes#

Adding a shape involves creating an annotation with one of the following types:

  • Square

  • Circle

  • Line

  • Polygon

  • PolyLine

Adding Circles & Squares#

Circles and Squares take a rectangle to set their size & position and have a variety of options.

For example, let’s draw a large square with different stroke & fill colors, a border effect and at 50% opacity.

EXAMPLE

let fileData = fs.readFileSync("test.pdf")

let document = mupdf.Document.openDocument(fileData, "application/pdf")
let page = document.loadPage(0)
let annotation = page.createAnnotation("Square")
annotation.setRect([100, 100, 300, 300])
annotation.setColor([0, 0, 0])
annotation.setInteriorColor([0.5, 0, 0])
annotation.setBorderEffect("Cloudy")
annotation.setBorderEffectIntensity(0.3)
annotation.setBorderWidth(5)
annotation.setOpacity(0.5)

fs.writeFileSync("output-circle.pdf", document.saveToBuffer("incremental").asUint8Array())

The available API for both Circle & Square is the same and you are able to get/set the following:

  • getColor (the “stroke” color of the shape)

  • getInteriorColor (the “fill” color of the shape)

  • getOpacity

  • getBorderWidth (the “stroke” thickness)

  • getBorderStyle (the “stroke” style)

  • getBorderEffect (the “stroke” effect)

  • getBorderEffectIntensity (the “stroke” effect intensity)

Adding Lines, Polygons & PolyLines#

These type of shapes take an either an array of line points (getLine) (Line) or vertex points getVertices (Polygon & PolyLine) to make the drawings.

The following example draws a line with a closed arrow line ending.

EXAMPLE

let fileData = fs.readFileSync("test.pdf")

let document = mupdf.Document.openDocument(fileData, "application/pdf")
let page = document.loadPage(0)
let annotation = page.createAnnotation("Line")
annotation.setColor([1, 0, 0])
annotation.setInteriorColor([0, 0, 1])
annotation.setLine([10, 300], [200, 500])
annotation.setLineEndingStyles("None", "ClosedArrow")
annotation.update()

fs.writeFileSync("output-line.pdf", document.saveToBuffer("incremental").asUint8Array())

Note

Setting the interior color (“fill”) of a line only applies to the line ending style - in the example above the “fill” of the arrow is green.

This example creates a blue triangle on the page using the Polygon type.

EXAMPLE

let fileData = fs.readFileSync("test.pdf")

let document = mupdf.Document.openDocument(fileData, "application/pdf")
let page = document.loadPage(0)
let annotation = page.createAnnotation("Polygon")
annotation.setColor([0, 0, 1])
annotation.setInteriorColor([0, 0, 1])
annotation.addVertex([10, 100])
annotation.addVertex([200, 200])
annotation.addVertex([30, 300])
annotation.update()

fs.writeFileSync("output-polygon.pdf", document.saveToBuffer("incremental").asUint8Array())