概要
- PencilKit を使用して描いた絵から UIImage を取得するコードを書く
- PKDrawing.image を使用して UIImage を取得する
今回の環境
- Xcode 11.0
- Swift 5.1
プロジェクトの作成
Xcode にてテンプレートから iOS + Single View App を選択する。
以下のオプションを選択する。
- Language: Swift
- User Interface: Storyboard
プロジェクトを作成すると AppDelegate.swift, SceneDelegate.swift, ViewController.swift という Swift のソースコードが用意される。
ソースコード
ViewController.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 を取得して、右下の領域に表示している。
