How to implement PencilKit in SwiftUI with background and zoom?

716 Views Asked by At

I am trying to build a view in SwiftUI that allows me to draw on top of another view, for example a table, using PencilKit. Everything must be zoomable and the elements of the background view must be clickable.

I thought about using a ZStack:

ZStack {
  CanvasView(canvasView: $canvasView)
  BackgroundView()
}

In this way I can draw on top of the BackgroundView and interact with its elements, but how can I manage the zoom? When I zoom only the canvas scales itself.

I thought about using scrollViewDidZoom:

extension Coordinator: PKCanvasViewDelegate {
    func scrollViewDidZoom(_ scrollView: UIScrollView) {
        onZoom()
    }
}

To know when the Canvas is zooming. Then the SwiftUI View change as below:

ZStack {
    CanvasView(canvasView: $canvasView, onZoom: onZoom)
    BackgroundView()
        .scaleEffect(scale)
}

func onZoom() {
    scale = canvasView.zoomScale
}

This way the BackgroundView scales itself but only focusing on the center. Is there a way to follow not only the canvas zoom scale but also the anchor of the zoom?

Or more generally, is there a way to get what I want? I see many apps that permits to draw on top of some view and interact with buttons inside that view, but I cannot find any useful documentation about that.

Thank you

0

There are 0 best solutions below