Rotate an ink annotation

Q: How can I rotate an ink annotation?

A: Ink signatures have no rotation concept in the PDF spec, so there is no rotation property on PSPDFKit.Annotations#InkAnnotation.

However, you can still perform a rotation by mapping and rotating the annotation points individually and adjusting the bounding box if needed:

This example provides a function that can rotate an ink annotation from the center of its bounding box using square angles (90, 180 and 270 degrees):

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function rotateInkAnnotation(annotation, degrees) {
  // Get annotation geometric center
  const annotationCenter = new PSPDFKit.Geometry.Point({
    x: annotation.boundingBox.left + annotation.boundingBox.width / 2,
    y: annotation.boundingBox.top + annotation.boundingBox.height / 2
  });

  let rotatedAnnotation = annotation.update("lines", lines =>
    lines.map(line =>
      line.map(point =>
        // Rotate each annotation point
        point
          .translate(annotationCenter.scale(-1))
          .rotate(degrees)
          .translate(annotationCenter)
      )
    )
  );

  // For 90 and 270 degrees, the bounding box needs to be rotated too
  if (degrees === 90 || degrees === 270) {
    rotatedAnnotation = rotatedAnnotation.set(
      "boundingBox",
      new PSPDFKit.Geometry.Rect({
        left: annotationCenter.x - annotation.boundingBox.height / 2,
        top: annotationCenter.y - annotation.boundingBox.width / 2,
        width: annotation.boundingBox.height,
        height: annotation.boundingBox.width
      })
    );
  }

  return rotatedAnnotation;
}

// Rotate annotation by 90 degrees and update it:
instance.updateAnnotation(rotateInkAnnotation(inkAnnotation, 90));

This has been tested with PSPDFKit for Web 2020.2.5.