はじめに

PencilKitで高解像度の画像をスクロールして絵を描けるようにする方法で悩んだので、備忘録です。

概要

PKCanvasViewはStoryboardで設定
高解像度の画像を表示する場合はスクロールして絵を描けるようにする
- 画面に収まる画像の場合は画面中央に配置して絵を描けるようにする
画像外は絵を描けないようにする

ソースコード

class ViewController: UIViewController {

    @IBOutlet weak var canvasView: PKCanvasView!
    private let imageView: UIImageView = UIImageView()
    private let pkToolPicker = PKToolPicker()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupPencilKit()
    }
    
    override func viewDidLayoutSubviews() {
         super.viewDidLayoutSubviews()
         if let size = imageView.image?.size {
             // imageViewを画像サイズに調整
             imageView.frame.size = CGSizeMake(size.width, size.height)
             // contentSizeを画像サイズに設定
             canvasView.contentSize = imageView.frame.size
             // 初期表示のためcontentInsetを更新
             updateScrollInset()
         }
     }

    private func updateScrollInset() {
         // imageViewの大きさからcontentInsetを再計算
         canvasView.contentInset = UIEdgeInsets(
            top: max((canvasView.frame.height - imageView.frame.height)/2, 0),
            left: max((canvasView.frame.width - imageView.frame.width)/2, 0),
            bottom: 0,
            right: 0
         );
     }
    
    private func setupPencilKit() {
        pkToolPicker.setVisible(true, forFirstResponder: canvasView)
        pkToolPicker.addObserver(canvasView)
        imageView.image = UIImage(named: "Sample")
        canvasView.insertSubview(imageView, at: 0)
        canvasView.becomeFirstResponder()
    }
    
}

実行結果

低解像度画像で絵を描く

高解像度画像で絵を描く

注意点

canvasView.insertSubview(imageView, at: 0)

addSubviewではPKCanvasViewの下にUIImageViewが表示されないので、注意が必要です。

補足

ズーム処理は追加していないので、ズームもしたい場合は別途対応が必要です。

参考にさせて頂いたページ