Create a preview image from a PKDrawing thats full canvas width

by

Summary

The problem at hand is converting a PKDrawing to a preview image that represents the full canvas width, including surrounding whitespace, and scaling it down to a smaller size. This is necessary for displaying a tiled view of all pages with previews of the canvas and for sharing the canvas as an image.

Root Cause

The root cause of this issue is that PKDrawing.image returns a cropped image, defined by drawing.bounds, which is relative to the original full-screen canvas. This means that the image does not include the surrounding whitespace, making it difficult to scale down the image while maintaining the original canvas’s appearance.

Why This Happens in Real Systems

This issue occurs in real systems because:

  • PKDrawing is designed to work with the PencilKit framework, which focuses on providing a drawing experience within a specified bounds.
  • The drawing.bounds property is used to define the area of the canvas that contains the drawing, which can lead to cropped images when trying to export the drawing as an image.
  • The lack of resources and documentation on this specific topic makes it challenging for developers to find a solution.

Real-World Impact

The real-world impact of this issue includes:

  • Inability to display accurate previews of the canvas in a tiled view, which can affect the user experience.
  • Difficulty in sharing the canvas as an image, which can limit the app’s functionality and sharing capabilities.
  • Increased development time spent trying to find a solution, which can delay the app’s release and increase costs.

Example or Code

import SwiftUI
import PencilKit

func createPreviewImage(from drawing: PKDrawing, size: CGSize) -> UIImage? {
    // Create a new image with the specified size
    UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
    defer { UIGraphicsEndImageContext() }

    // Draw the PKDrawing on the new image
    drawing.image(from: drawing.bounds, scale: UIScreen.main.scale).draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))

    // Return the new image
    return UIGraphicsGetImageFromCurrentImageContext()
}

How Senior Engineers Fix It

Senior engineers fix this issue by:

  • Understanding the PKDrawing framework and its limitations.
  • Using UIGraphicsImageRenderer or UIGraphicsBeginImageContextWithOptions to create a new image with the specified size.
  • Drawing the PKDrawing on the new image using the draw(in:) method.
  • Scaling the image to the desired size while maintaining the original canvas’s appearance.

Why Juniors Miss It

Junior engineers may miss this solution because:

  • Lack of experience with the PencilKit framework and its nuances.
  • Insufficient understanding of graphics rendering and image processing.
  • Difficulty in finding resources and documentation on this specific topic.
  • Overreliance on PKDrawing.image, which can lead to cropped images and other issues.