소개

6월에 있던 WWDC 2019에서 PencilKit이 발표되었습니다.

이것은 정품 메모 앱 등에서 사용되는 펜 툴을 타사 앱에서도 사용할 수 있게 하는 것으로, Apple Pencil 관련 앱 개발의 장애물이 단번에 내려갑니다.

PencilKit 개요

PencilKit의 주요 부품에 대해 씁니다.
실수가 있으면 지적해 주시면 감사하겠습니다.

PKCanvasView

Apple Pencil에서 쓰기를 수락하는 View입니다.
UIScrollView를 상속하고 ContentSize를 확대하여 스크롤 등도 할 수 있습니다.

PKDrawing

Apple Pencil의 쓰기 데이터입니다.
Codable을 상속하므로 인코딩하고 파일로 저장할 수도 있습니다.

PKToolPicker

펜의 색상을 선택하거나 지우개를 선택하는 펜 도구 세트입니다.
view 대신 window에 연결하여 사용합니다.

PencilKit 주변의 다양한

var canvasView: PKCanvasView!
var toolPicker : PKToolPicker?

PKCanvasView 초기화

손가락으로 쓰기 비활성화

canvasView.allowsFingerDrawing = false

배경 투명화

canvasView.isOpaque = false

PKToolPicker 보기

Apple의 Documentation에 있는 Example이 매우 도움이 되었습니다.
htps : //에서 ゔぇぺぺr. 아 ぇ. 코 m / 도쿠 멘 타치 온 / 펜시 l 키 t / d 라우 엔 g_ 우 ㅇ th 펜 시 l 키 t

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    if let window = parent?.view.window, let toolPicker = PKToolPicker.shared(for: window) {
        self.toolPicker = toolPicker
        self.toolPicker!.setVisible(true, forFirstResponder: canvasView)
        self.toolPicker!.addObserver(canvasView)
        self.toolPicker!.addObserver(self)
        canvasView.becomeFirstResponder()
    }
    parent?.view.window?.windowScene?.screenshotService?.delegate = self
}

툴의 표시·숨기의 전환은 setVisible() 로 할 수 있습니다.

func togglePickerTool(_ visible : Bool){
    if toolPicker != nil {
        toolPicker!.setVisible(visible, forFirstResponder: canvasView)
    }
}

PKDrawing 저장

PKDrawing 단독으로 관리하는 것은 어렵기 때문에 ID 등과 함께 저장합니다.
저장할 데이터의 집합을 다음 클래스에서 정의합니다.

public class Note : Codable {
    public var drawing: PKDrawing
    public var uuid = UUID()
    // その他タイトルや最終更新日など必要なものを定義
}

파일에 저장

let note = Note(drawing: canvasView.drawing)
let localDirectory = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first!
let url = localDirectory.appendingPathComponent("\(note.uuid).custom")

let encoder = PropertyListEncoder()

do {
    let data = try encoder.encode(note)
    try data.write(to: url)
    print("successfully saved item \(note.uuid)")
} catch {
    os_log("Could not save data model: %s", type: .error, error.localizedDescription)
}

파일 로드

var loadedNote: Note

let decoder = PropertyListDecoder()

do {
    let data = try Data(contentsOf: url)
    loadedNote = try decoder.decode(Note.self, from: data)
} catch {
    os_log("Could not load data model: %s", type: .error, error.localizedDescription)
}

결론

이번에 간단하게 Apple Pencil을 이용한 앱을 개발할 수 있게 되었으므로, PencilKit과 WKWebView를 조합한 어플리케이션을 작성했습니다.

개인적으로는 Qiita나 Medium등의 기사에 여러가지 생각한 것을 기입해 가는,, 라고 하는 것을 상정해 만들고 있습니다.

원한다면 꼭 사용해보십시오.

Notewind