今回はPencilKitについてです
PencilKitとはApple Pencilやユーザーの指からの入力を受け取り、iPadOS、iOS、macOSで表示する画像に変換するiOSアプリケーション用の描画できるSDKです
PencilKitには、線を作成したり、消したり、選択したりするツールが付属しています
簡単な実装で実現できるのでどのように実現させるのかみていきましょう
レイアウト作成
まずはレイアウトを作成します。StoryBoardは次のようにしています
PKCanvasViewを使用して入力をキャプチャします。このオブジェクトは、Apple Pencilや指によるタッチをキャプチャすることができます。
Viewのクラス名をPKCanvasViewに設定するとPKCanvasViewとして認識されます。 また、検索するとPKCanvasViewをStoryBoardで設定せずに、ソースコードで直接PKCanvasViewを生成している記事が多いですが、それでも大丈夫です
imageViewを配置しているのは画像の上で入力できるようにするためです
キャンバスとパレットの設定
レイアウトを作成したら入力できるように設定します
PKCanvasViewはレイアウトの設定を行ったので、入力エリアは設定できています。
あとは、PKToolPickerという色やペンの種類を変更するためのパレットを表示させる設定を行います
class PencilKitViewController: UIViewController {
@IBOutlet private weak var pencilKit: PKCanvasView!
private let pkToolPicker = PKToolPicker()
override func viewDidLoad() {
super.viewDidLoad()
// CanvasViewで入力ができるようにする
pencilKit.tool = PKInkingTool(.pen, color: .black, width: 30)
if #available(iOS 14.0, *) {
pencilKit.drawingPolicy = .anyInput
}
// CanvasViewの下の画像が表示できるようにCanvasViewを透明にする
pencilKit.isOpaque = true
pencilKit.backgroundColor = .clear
pencilKit.becomeFirstResponder()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
if let pencilKit = pencilKit {
pkToolPicker.setVisible(true, forFirstResponder: pencilKit)
pkToolPicker.addObserver(pencilKit)
}
}
}
pencilKit.drawingPolicy = .anyInputでApple Pencilだけでなく手でも入力できるようにしています。drawingPolicyはiOS14以降で設定できるため注意してください
基本的には上記ソースコードにコメントを記載しています。ただ、「CanvasViewの下の画像が表示できるようにCanvasViewを透明にする」というのは画像が下にあって入力できるようにするために必要なので、 お絵描きをするためだけであればなくてもいい処理になります
また、ツールパレットを表示させる処理はviewDidAppearで行わないと表示されないので注意が必要です
入力したデータを変換する
PKCanvasViewで入力したデータをUIImageに変換することができます
次のように、PKDrawing.imageでUIImageを取得します
let image = pencilKit.drawing.image(from: pencilKit.bounds, scale: 1.0)
UIImage として取得したいPKCanvasViewの範囲をfromに指定して、画像の拡大率をscaleに指定します
上記の方法でUIImageを取得できます
最後に
お絵描きアプリなど作成する場合には湯買うことになると思いますが、短いコードで実現できるので導入しやすいと思います
細かい情報はWWDCなどの映像や公式ドキュメントで確認できるので調べてみるのをおススメします！
