How can I zoom into a ScrollView in SwiftUI

Question

I'm trying to zoom and pan on an Image in SwiftUI for a Catalyst app. There is no PanGesture, but ScrollView seems to work well on both iPad and Mac. I just can't scroll around on the magnified image.

struct TestScrollView: View {
    @State var scale: CGFloat = 1.0
    
    var body: some View {
        VStack {
            ScrollView([.horizontal,.vertical], showsIndicators: false) {
                    Image("image")
                        .resizable()
            }
            .gesture(MagnificationGesture()
            .onChanged({ (scale) in
                self.scale = scale
            }))
                .scaleEffect(self.scale)
        }
    }
}

And with the following code...

ScrollView([.horizontal,.vertical], showsIndicators: false) {
    Image("large_image")
        .resizable()
        .gesture(MagnificationGesture()
                    .onChanged({ (scale) in
                        self.scale = scale
                    }))
        .scaleEffect(self.scale)
}

...I get this:

It seems to scroll right a lot and it gets cut off on the left side.

I got the same results. Any update to this answer? – user6539552 Jan 17 '21 at 08:31 — user6539552, Jan 17 '21 at 08:31

score 7 · Answer 1 · answered Sep 16 '20 at 08:54

It seems that the content's frame size stays the same after applying scaleEffect, and that's why you are unable to scroll inside ScrollView. There's nowhere to scroll to. You can fix the problem by manually specifying the frame size after scaling. If you don't know the original frame size, use GeometryReader to calculate the frame size after scaling dynamically.

ScrollView([.horizontal, .vertical], showsIndicators: false) {
    Image(systemName: "square.fill")
        .resizable()
        .frame(width: 200, height: 200)
        .scaleEffect(self.scale)
        .frame(
            width: 200 * self.scale,
            height: 200 * self.scale
        )
}
.gesture(magnificationGesture)

Also, your MagnificationGesture's onChanged implementation has some problems. Refer to this answer by James.

How can I zoom into a ScrollView in SwiftUI

1 Answers1

Linked