挨拶
こんにちは。HAAAAANと申します。
今回は表題の通り、PDFファイルの上に落書きができるアプリを作りましたので
忘備の意味も込めて、書いていきたいと思います。
初学者の為、誤った表現・理解があるかとは存じますが、何卒宜しくお願い致します。
なお、今回のアプリはただ落書きするためだけのものなので、
保存機能などはありません。（今後の課題）
環境
MacOS
Xcode
swift
iPad Pro(iOS:13.6)
目的
ぜったいにじっそうする
① PDFファイルを画面に表示する
② 表示されたPDFファイルの上に落書きができる
そのうちにやる
① 落書きが終わったら落書きと一緒にPDFファイルを保存する
② ①ができたらその画像ファイルをPDFファイルにする
‐ イメージ的には画面のスクリーンショットをとって、その画像をPDFに変換してあげる感じ。
（出来るかどうかはわからない）
下準備
- storyboardを開き、大元のViewControllerにViewを1つ追加する。
- 追加したViewのCustomClassのClass名にPDFViewを設定し、Outlet接続をする。
- 表示させたいPDFファイルをプロジェクトファイルに追加する。
コード
import UIKit
import PDFKit
import PencilKit
class ViewController: UIViewController{
@IBOutlet weak var pdfView: PDFView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
if let sourceURL = Bundle.main.url(forResource: "Test", withExtension: "pdf") {
if let source = PDFDocument(url: sourceURL) {
pdfView.document = source //PDFのURL
pdfView.autoScales = true //PDFが画面におさまる
pdfView.displayMode = .singlePage //1pageの表示
}
}
let canvas = PKCanvasView(frame: view.frame) //描画領域の設定
view.addSubview(canvas) //描画領域をPDFの上に追加
canvas.tool = PKInkingTool(.pen, color: .black, width: 15) //ペンの設定
canvas.isOpaque = false //背景を透明にする(だいじ)
if let window = UIApplication.shared.windows.first {
if let toolPicker = PKToolPicker.shared(for: window) {
toolPicker.addObserver(canvas)
toolPicker.setVisible(true, forFirstResponder: canvas)
canvas.becomeFirstResponder()
}
}
}
}
詰まったところ
・View実装時
構成としては、おおもとのViewControllerにPDFViewを載せて、その上に
描画のためのViewを載せる形を考えており、その通りに実装ができたのですが、
Web徘徊中にどこかの記事で、ペンでの描画時に画面が真っ暗になってしまうという
不具合に遭遇しましたと言う物がありまして、私も途中全く同じ症状が出てしまいました。
おそらくジェスチャー時のトリガーで何某かの処理が動いてそうなっているんだろうなーと思い
背景色を変えてみると、真っ黒になるはずのその画面が背景色に設定した色になったので
View自体を透明にすることにしました。
はじめは描画用のViewの背景色にalpha値を設定していましたが、それをやめて
ViewのisOpaque値をfalseにすることで、ジェスチャー時の不具合はなくなりました。
参考資料
今回は上記の記事をただ組み合わせただけです！（ドン！！！）
後日談
PencilKit導入しなくても、PDFKitの機能の一つにPDF Annotation
（注釈の機能）というものがあり、PDF上に直接描画可能ということで・・・
キャプチャとってImageファイルからPDFファイル にしてという手間が省けるようで、そっち使って実装しようかなあ。