通過本教程，你能學會在SwiftUI中調(diào)用PencilKit器净。

Jun-14-2020 11-02-51.gif

蘋果iOS的Apple Pen的體驗是在目前各品牌pad的手寫筆中最好的碗暗。2019年，蘋果官方為蘋果筆的開發(fā)發(fā)布了PencilKit驹针。不過PencilKit還是基于UIKit的，如何在SwiftUI中使用诀艰，本文來教你柬甥。

首先建立基本視圖，其中注意PencilKit的主要對象有Canvas和PKDrawing其垄，Canvas就是白板（也有叫畫布的）苛蒲，PKDrawing就是在白板上畫的圖像了，它有函數(shù)可以轉(zhuǎn)為UIImage或Data：

import SwiftUI
import PencilKit
struct ContentView: View {
    @State private var showDrawView: Bool = false
    // PencilKit相關的model應以PKDrawing為基本對象绿满，需要導出時再用.image()或.dataRepresentation() 轉(zhuǎn)換
    @State var drawing = PKDrawing()
    var body: some View {
        VStack{
            Image(uiImage: drawing.image(from: drawing.bounds, scale: 1) )
                .resizable().frame(width:600, height: 800).border(Color.blue)
            Button("畫板"){
                self.showDrawView.toggle()
            }
            .sheet(isPresented: self.$showDrawView) {
                DrawView(isShown: self.$showDrawView, drawing: self.$drawing)
            }
        }
    }
}

struct DrawView: View {
    @Binding var isShown: Bool
    @Binding var drawing: PKDrawing
    var body: some View {
        VStack{
            HStack {
                Spacer()
                Button("Done"){
                    self.isShown.toggle()
                }.padding(.trailing, 20)
            }.padding(.top, 10)
            Divider()
            DrawCanvas(drawing: $drawing)
        }
    }
}

下面就是本文的主要技術點了: 如何從SwiftUI來調(diào)用UIKit中的Canvas臂外，并保持主界面和Canvas之間的數(shù)據(jù)交互。Canvas具體的類名是PKCanvasView.

struct DrawCanvas: UIViewRepresentable {
    @Binding var drawing : PKDrawing
    
    func makeCoordinator() -> DrawCoordinator {
        DrawCoordinator(self)
    }
    
    func makeUIView(context: Context) -> PKCanvasView {
        let canvas = PKCanvasView()
        canvas.isOpaque = false
        canvas.backgroundColor = .clear
        // 配置工具箱
        let toolpicker = PKToolPicker.shared(for: UIApplication.shared.windows.first!)
        toolpicker?.addObserver(canvas)
        toolpicker?.setVisible(true, forFirstResponder: canvas)
        canvas.becomeFirstResponder()
        canvas.delegate = context.coordinator // 關鍵喇颁。設了才能得到輸出寄月！
        // 來自父界面的輸入
        canvas.drawing = drawing
        canvas.isScrollEnabled = true
        return canvas
    }
    
    func updateUIView(_ canvas: PKCanvasView, context: Context) {
    }
}

class DrawCoordinator : NSObject, PKCanvasViewDelegate {
    var parent: DrawCanvas
    
    init(_ uiView: DrawCanvas) {
        self.parent = uiView
    }
    
    func canvasViewDrawingDidChange(_ drawView: PKCanvasView) {
        // 輸出到父界面
        self.parent.drawing = drawView.drawing
    }
}