CODEWITHSUNDEEP
iosswiftswiftui
ntrupin
ntrupin

Reputation: 454

SwiftUI: pinch to zoom on image

I want to allow the user to pinch-to-zoom in on an Image in SwiftUI. I figured the best way to go was to use a MagnificationGesture and, following along with the answer here, I ended up with this code:

// outside of `var body: some View`
@State private var scale: Int = 1.0
@State private var lastScale: Int = 1.0

// Image 
Image("dog")
.resizable()
.aspectRatio(contentMode: .fit)
.gesture(MagnificationGesture()
    .onChanged { val in
        let delta = val / self.lastScale
        self.lastScale = val
        let newScale = self.scale * delta
        self.scale = newScale
    }
    .onEnded { _ in
        self.lastScale = 1.0
    }
)
.scaleEffect(scale)

This code handles magnification fine, but does not let the user zoom in on a specific area. Instead, it always zooms in on the middle of the image.

How would I go about handling pinch-to-zoom behavior on an image in SwiftUI?

Upvotes: 12

Views: 7161

Answers (1)

Ken
Ken

Reputation: 81

I found that the easiest way to achieve is to use PDFKit provided by Apple .

1.Start by creating PDFView

    import SwiftUI
    import PDFKit

    struct PhotoDetailView: UIViewRepresentable {
    let image: UIImage
    func makeUIView(context: Context) -> PDFView {
        let view = PDFView()
        view.document = PDFDocument()
        guard let page = PDFPage(image: image) else { return view }
        view.document?.insert(page, at: 0)
        view.autoScales = true
        view.backgroundColor = .clear
        return view
    }
    
    func updateUIView(_ uiView: PDFView, context: Context) {
        
    }
    }

2.Use in swiftUI view, like this

TabView(selection: $index,
                content:  {
                //this line
                PhotoDetailView(image: images[index])
                    .offset(imageViewerOffset)
                
        })
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))

Upvotes: 3

Related Questions