Преобразование рисунка в изображение с помощью PencilKit в SwiftUI

Question

У меня есть этот простой View в SwiftUI, и я реализовал PencilKit для подписи пользователя. У меня вопрос, как я могу создать изображение из рисунка пользователя.

import SwiftUI
import PencilKit




struct ContentView : View {

    var body: some View {
        VStack {
            Text ("Sign here:")
            PenKitRepre()
                .frame(height: 80.0)
                .border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/, width: 10)
            Button(action: {


            }) {
                Text("Save")
            }
        }

    }
}
struct PenKitRepre : UIViewRepresentable {
    func makeUIView(context: Context) -> PKCanvasView {
        return PKCanvasView();
    }

    func updateUIView(_ uiView: PKCanvasView, context: Context) {

    }
}

Изображение не должно сохраняться в фотопленке.

Answer 1

You can get the image of the user drawings like this, for example:

let imgRect = CGRect(width: 400, height: 80) 
let image = canvasView.drawing.image(from: imgRect, scale: 1.0)

Answer 2

В большинстве случаев предпочтительный размер изображения должен включать всю область рисования. Для этого создайте размер рисунка и используйте его для установки размера изображения и размера содержимого холста.

Создайте размер чертежа:

      @State var drawingSize: CGSize = CGSize(width: 350, height: 80)

Установите размер изображения, используя этот размер рисунка, а затем сохраните изображение:

      let imgRect = CGRect(origin: CGPoint.zero, size: drawingSize)
image = canvasView.drawing.image(from: imgRect, scale: 1.0)

Установите размер контента:

      canvasView.contentSize = drawingSize

Чтобы отобразить полное изображение в правильном аспекте:

          Image(uiImage: image)
        .resizable()
        .aspectRatio(drawingSize, contentMode: .fit)

Это пример сохраняемой подписи:

Улучшенный пример кода:

      import SwiftUI
import PencilKit

struct ContentView : View {
    
    @State var canvasView = PKCanvasView()
    @State var drawingSize: CGSize = CGSize(width: 350, height: 80)
    @State var image: UIImage = UIImage()
    
    var body: some View {
        VStack {
            Image(uiImage: image)
                .resizable()
                .aspectRatio(drawingSize, contentMode: .fit)
                .frame(height: 100)
            
            Text ("Sign here:")
            PenKitRepre(canvasView: $canvasView, drawingSize: $drawingSize)
                .frame(width: drawingSize.width, height: drawingSize.height)
                .border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/, width: 10)
            
            Button(action: {
                let imgRect = CGRect(origin: CGPoint.zero, size: drawingSize)
                image = canvasView.drawing.image(from: imgRect, scale: 1.0)
            }) {
                Text("Save")
            }
        }
    }
}


struct PenKitRepre : UIViewRepresentable {
    @Binding var canvasView: PKCanvasView
    @Binding var drawingSize: CGSize
    
    func makeUIView(context: Context) -> PKCanvasView {
        canvasView.tool = PKInkingTool(.pen, color: .black, width: 3)
        canvasView.drawingPolicy = .anyInput
        canvasView.contentSize = drawingSize
        return canvasView
    }
    
    func updateUIView(_ uiView: PKCanvasView, context: Context) {
        
    }
}