PencilKit에 그려진 그림에서 UII Mage 가져오기

개요

PencilKit는 그려진 그림에서 UIimage 코드를 가져옵니다

PKDrawing.image를 사용하여 UIimage를 얻습니다

이번 환경

Xcode 11.0

Swift 5.1

항목 만들기

Xcode에서 템플릿에서 iOS+Single ViewApp을 선택합니다.

다음 옵션을 선택합니다.

Language: Swift

User Interface: Storyboard

프로젝트를 만들면 App Delegate.swift, SceneDelegate.swift, ViewController.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
        }
    }
}

실제 실행 결과

실제 기기(아이패드 Pro11-inch+iPadOS13.1)에 설치하고 실행합니다.
오른쪽에 있는 "UIIMage 표시 버튼"을 누르면 왼쪽에 그려진 그림의 UIIMage가 오른쪽 아래에 표시됩니다.

참고 자료

PencilKit | Apple Developer Documentation

Introducing PencilKit - WWDC 2019 - Videos - Apple Developer

Drawing With PencilKit | Apple Developer Documentation