PencilKit で描いた絵から UIImage を取得する

## 概要
- PencilKit を使用して描いた絵から UIImage を取得するコードを書く
- PKDrawing.image を使用して UIImage を取得する

## 今回の環境

- Xcode 11.0
- Swift 5.1

## プロジェクトの作成

Xcode にてテンプレートから iOS + Single View App を選択する。

<img width="725" alt="pencil-kit-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/201689f2-bf23-f35f-8043-4562147d389d.png">

以下のオプションを選択する。

- Language: Swift
- User Interface: Storyboard

<img width="725" alt="pencil-kit-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/b4dcb527-513e-bc62-c50c-0ac81a460168.png">

プロジェクトを作成すると AppDelegate.swift, SceneDelegate.swift, ViewController.swift という Swift のソースコードが用意される。

## ソースコード

ViewController.swift を以下のコードに置き換える。

```swift
import UIKit
import PencilKit // PencilKit を使う

class ViewController: UIViewController {

    var canvasView: PKCanvasView? // 描画キャンバス
    var imageView: UIImageView? // UIImage表示領域

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        // 横幅の1/4をビュー配置の基本サイズとする
        let unit = view.frame.width / 4

        // PKCanvasView: 描画キャンバス
        let canvasView = PKCanvasView(frame: CGRect(x: 0, y: 0, width: unit * 2, height: unit * 2))
        canvasView.tool = PKInkingTool(.pen, color: .black, width: 30)
        view.addSubview(canvasView)
        self.canvasView = canvasView

        // PKToolPicker: ドラッグして移動できるツールパレット (ペンや色などを選択できるツール)
        if let window = UIApplication.shared.windows.first {
            if let toolPicker = PKToolPicker.shared(for: window) {
                toolPicker.addObserver(canvasView)
                toolPicker.setVisible(true, forFirstResponder: canvasView)
                canvasView.becomeFirstResponder()
            }
        }

        // UIImage表示ボタン
        let button = UIButton(frame: CGRect(x: unit * 2, y: 0, width: unit, height: unit))
        button.setTitle("UIImage表示ボタン", for: .normal)
        button.setTitleColor(UIColor.green, for: .normal)
        button.setTitle("UIImage表示ボタン", for: .highlighted)
        button.setTitleColor(UIColor.brown, for: .highlighted)
        button.backgroundColor = UIColor.blue
        button.addTarget(self, action: #selector(ViewController.onClickButton(sender:)), for: .touchUpInside)
        view.addSubview(button)

        // UIImage表示領域
        let imageView = UIImageView(frame: CGRect(x: unit * 2, y: unit, width: unit, height: unit))
        view.addSubview(imageView)
        self.imageView = imageView
    }

    // UIImage表示ボタンがクリックされたときに呼び出される
    @objc internal func onClickButton(sender: UIButton) {
        let unit = self.view.frame.width / 4
        // PKDrawing.image で UIImage を取得する
        // UIImage として取得したい PKCanvasView の範囲を from に指定
        // 画像の拡大率を scale に指定
        let image = canvasView?.drawing.image(from: CGRect(x: 0, y: 0, width: unit * 2, height: unit * 2), scale: 1.0)
        DispatchQueue.main.async {
            self.imageView?.image = image
        }
    }
}
```

## 実機での実行結果

実機 (iPad Pro 11-inch + iPadOS 13.1) にインストールして実行してみる。
右上の「UIImage表示ボタン」を押すと、左側に描いた絵の UIImage を取得して、右下の領域に表示している。

![PencilKit-UIImage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/5a0bc658-72c7-56fc-d0d5-76b5c38d48ff.png)

## 参考資料

- [PencilKit \| Apple Developer Documentation](https://developer.apple.com/documentation/pencilkit)
- [Introducing PencilKit \- WWDC 2019 \- Videos \- Apple Developer](https://developer.apple.com/videos/play/wwdc2019/221/)
- [Drawing With PencilKit \| Apple Developer Documentation](https://developer.apple.com/documentation/pencilkit/drawing_with_pencilkit)