iOS 11 PDFKit Ink annotation - cannot fill UIBezierPath

Question

I'm adding ink annotations to PDFDocument using the PDFAnnotation() class with subtype ink. The idea is to capture signatures that are drawn using touch.

Inspired by UberSignature my UIBezierPath is a series of rectangles that are supposed to be filled with a color. However, when I add the annotation to the PDFDocument it is not filled.

It seems the UIBezierPath's fill() method does nothing at all when added to a PDFAnnotation?

If I use the same UIBezierPath and draw it on an UIImage it is correctly filled with a solid color.

Any ideas on what could be wrong?

Problematic code:

UIColor.red.setStroke()
UIColor.red.setFill()

var path = UIBezierPath()
path.append(myRectangles)
path.fill()

var annotation = PDFAnnotation(bounds: path.bounds, forType: .ink, withProperties: nil)
annotation.add(path)
myPDFPage.addAnnotation(annotation)

In the screenshot I have tried to write normal text, and two example lines. The line on the left is drawn slowly, the line on the right is drawn fast. The idea is to have width of the line vary according to the speed it is drawn to make a signature look more natural/realistic.

Have you found a way to adjust lines width and style depending on Pencil's pressure, speed and position? I tried to implement the same way as Apple uses in their sample app (developer.apple.com/documentation/uikit/…), but faced serious performance issues. — Tim
Yes, I use the technique displayed in my question and answer, where I add "chop up" the line into a number of smaller quadrilaterals of different sizes. To improve performance I make sure to make several annotations instead of bunching everything into one, and I have also implemented bitmap caching. I.e. I store the actual bitmap calculated for every x iterations, so that when strokes are added, I only have to render the newest strokes on each draw. The rest is cached. — jksoegaard

jksoegaard jksoegaard · Accepted Answer · 2018-03-09T22:21:05

I managed to find a solution to the problem that seems relatively optimal.

The trick is do create a subclass of PDFAnnotation and override the draw(with box:, in context:) function. In this function I can use the drawPath(using: .fill) method to fill out bezier path.

The code can look like this:

class SignatureAnnotation : PDFAnnotation {
  public var myPath : UIBezierPath = UIBezierPath()

  override func draw(with box: PDFDisplayBox, in context: CGContext) {
    context.saveGState()
    self.page?.transform(context, for: box)
    context.beginPath()
    context.setLineWidth(0.1)
    context.setShouldAntialias(true)
    context.addPath(self.myPath.cgPath.mutableCopy()!)
    context.drawPath(using: .fill)
    context.restoreGState()
  }
}

Add this annotation (type .stamp) to the PDF instead of the ink annotation, and everything will be rendered as vector (fully zoomable without being pixelated) - and will be saved together with the rest of the PDF when saved to file or data buffer.

Only drawback is that the UIBezierPath cannot be too complicated as flickering will be introduced if the draw() function takes too long. This can be solved by simply splitting up the UIBezierPath into multiple seperate paths that each has its own annotation.

iOS 11 PDFKit Ink annotation - cannot fill UIBezierPath

2 Answers