[PencilKit] PKDrawing에서 image 추출하기

사용자의 서명을 받기 위한 Demo를 만드는 중...PencilKit에 대해 알게 된 것을 간단하게 정리해본다.

1. 들어가기

• 버튼 클릭 시 새로운 서명을 작성한다.
• 이 때, PKDrawing 객체를 생성한다.
• 여기서 dataModel은 전체 서명을 저장하고 관리하는 객체로 서명 Array를 가지고 있다. (custom한 class임)

func newSignature() {
        let newSignature = PKDrawing()
        dataModel.signatures.append(newSignature)
        ...
    }

• PKDrawing 객체는 PKCanvasView와 연결된다.

@IBOutlet var canvasView: PKCanvasView!

override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        // set up the canvas view with the first drawing from the data model
        canvasView.delegate = self
        canvasView.drawing = dataModelController.signatures[signatureIndex]
        canvasView.alwaysBounceVertical = true
    }

2. 공식문서 톺아보기

https://developer.apple.com/documentation/pencilkit/pkdrawing

• PKDrawing 객체는 PKCanvasView 객체로부터 유저가 그린 컨텐츠를 저장한다.
• 유저의 그림과 관련된 data를 저장할 수 있다.
• 저장된 데이터를 추후에 새로운 그림을 그리는 데에 사용할 수도 있다.
• 이미지로 생성하여 클립보드 복사, 디스크 저장, 공유할 수 있다.

3. 이미지 생성하기

• 서명 thumbnail을 만들기 위해 PKDrawing을 UIImage로 변환했다.

private func generateThumbnail(_ index: Int) {
        let signature = signatures[index]
        let aspectRatio = DataModelController.thumbnailSize.width / DataModelController.thumbnailSize.height
        let thumbnailRect = CGRect(x: 0, y: 0, width: DataModel.canvasWidth, height: DataModel.canvasWidth / aspectRatio)
        let thumbnailScale = UIScreen.main.scale * DataModelController.thumbnailSize.width / DataModel.canvasWidth
        let traitCollection = thumbnailTraitCollection
        
        thumbnailQueue.async {
            traitCollection.performAsCurrent {
                let image = signature.image(from: thumbnailRect, scale: thumbnailScale)
                ...
            }
        }
    }

method를 살펴보자.

https://developer.apple.com/documentation/pencilkit/pkdrawing/3281893-image

func image(
    from rect: CGRect,
    scale: CGFloat
) -> UIImage

• rect
  전체 그림에서 이미지로서 캡쳐를 하고 싶은 부분. CGRect로 사각형 범위를 지정해야 한다. (x,y좌표나 너비, 높이 등)
• scale
  1.0이 기본값, 1.0보다 큰 값일 경우 이미지는 더욱 디테일해진다. Retina display일 경우 2.0 또는 3.0으로 지정