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