ios – How can I load an background picture for enhancing with PencilKit that’s scaled to suit, zoomable, and panable?

I’m very new to Swift and cell improvement and am attempting to create my first easy utility for macOS and iPad use.

I’m attempting to create an utility that originally shows a picture and permits the consumer to put in writing on it. I’ve an elementary instance working, however I’m having an issue.

At the moment, the background picture I load is bigger than the viewable display.

• I might prefer it in order that the picture is scaled to the viewable display by default however can then be zoomed with normal pinch gestures and panned with 2-finger gestures.
• The entire picture could be written on high of.

I’ve searched and tried a couple of issues, however I’m clearly nonetheless lacking one thing about how every little thing suits collectively.

Any assist/pointers can be a lot appreciated.

import SwiftUI
import SwiftData
import PencilKit

struct ContentView: View {
    @Surroundings(.undoManager) personal var undoManager
    @State personal var canvasView = PKCanvasView()

    var physique: some View {
        
        VStack{
            HStack(spacing: 5) {
                Spacer(minLength: 1)
                Button("Clear") {
                    canvasView.drawing = PKDrawing()
                }.buttonStyle(.borderedProminent)
                Spacer(minLength: 1)
                Button("Undo") {
                    undoManager?.undo()
                }.buttonStyle(.borderedProminent)
                Spacer(minLength: 1)
                Button("Redo") {
                    undoManager?.redo()
                }.buttonStyle(.borderedProminent)
                Spacer(minLength: 1)
                Button("Take away Object") {
                    self.canvasView.instrument = PKEraserTool(.vector);
                }.buttonStyle(.borderedProminent)
                Spacer(minLength: 1)
                Button("Erase") {
                    self.canvasView.instrument = PKEraserTool(.bitmap, width: 3);
                }.buttonStyle(.borderedProminent)
                Button("Draw") {
                    let coloration = PKInkingTool.convertColor(.black, from: .darkish, to: .mild)
                    self.canvasView.instrument = PKInkingTool(.monoline, coloration: coloration, width: 3)
                }.buttonStyle(.borderedProminent)
                Spacer(minLength: 1)
            }
            
            GeometryReader { proxy in
                VStack {MyCanvas(canvasView: $canvasView)}
                    .body(width: proxy.dimension.width, top: proxy.dimension.top)
                    .background(.black)
            }
        }
    }

}

struct MyCanvas: UIViewRepresentable {
    @Binding var canvasView: PKCanvasView
    //let picker = PKToolPicker()
    let screenSize: CGRect = UIScreen.primary.bounds

    func makeUIView(context: Context) -> PKCanvasView {

        //canvasView.contentSize = CGSize(width: 1500, top: 1000)
        canvasView.contentInset = UIEdgeInsets(high: 10, left: 10, backside: 10, proper: 10)
        canvasView.minimumZoomScale = 0.2
        canvasView.maximumZoomScale = 4.0
        canvasView.drawingPolicy = .anyInput
        canvasView.isOpaque = false
        canvasView.backgroundColor = UIColor.clear
        canvasView.body(forAlignmentRect: screenSize)
        canvasView.becomeFirstResponder()

        let imageView = UIImageView(picture: UIImage(named: "tracker"))
        imageView.body(forAlignmentRect: screenSize)
        imageView.contentMode =  UIView.ContentMode.scaleAspectFit

        let contentView = canvasView.subviews[0]
        contentView.addSubview(imageView)
        contentView.sendSubviewToBack(imageView)

        //picker.addObserver(canvasView)
        //picker.setVisible(true, forFirstResponder: canvasView)

        let coloration = PKInkingTool.convertColor(.black, from: .darkish, to: .mild)
        canvasView.instrument = PKInkingTool(.monoline, coloration: coloration, width: 3)
        return canvasView
    }

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

#Preview {
    ContentView()
        .modelContainer(for: Merchandise.self, inMemory: true)
}

struct Landscape_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewInterfaceOrientation(.landscapeLeft)
    }
}

Preview of the present implementation: