[SwiftUI]图片缩放

使用GeometryReader、ScrollView和Image实现图片缩放功能

代码:

import SwiftUI

struct MPAlbumDetailView: View {
    
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    @State var imageScale: CGFloat = 1
    var model : MPAlbumModel?
    var magGesture: some Gesture {
        MagnificationGesture().onChanged({ value in
            let newValue = self.imageScale + (value - 1)*0.1
            if newValue < 1 {
                self.imageScale = 1
            } else if newValue > 5 {
                self.imageScale = 5
            } else {
                self.imageScale = newValue
            }
        })
    }
    var tapGesture: some Gesture {
        TapGesture(count:2).onEnded { ges in
            print(ges)
            if imageScale == 2 {
                imageScale = 1
            } else {
                imageScale = 2
            }
        }
    }
    
    var body: some View {
        GeometryReader { geo in
            ScrollView([.horizontal, .vertical], showsIndicators: true) {
                Image(model?.name ?? "")
                    .resizable()
                    .scaledToFit()
                    .frame(width:geo.size.width * imageScale)
                    .clipped()
            }
            .edgesIgnoringSafeArea(.bottom)
            .gesture(magGesture)
            .gesture(tapGesture)
        }
        .navigationTitle("\(model?.name ?? "")")
        .navigationBarBackButtonHidden()
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button {
                    presentationMode.wrappedValue.dismiss()
                } label: {
                    Image(systemName: "chevron.backward")
                        .foregroundColor(Color.black)
                }
            }
        }
    }
    
}

struct MPAlbumDetailView_Previews: PreviewProvider {
    static var previews: some View {
        MPAlbumDetailView()
    }
}

示意图:

双击缩放(推荐)

 捏动手势缩放(ScollView的弹动动画会影响到手势的流畅性)

猜你喜欢

转载自blog.csdn.net/u012881779/article/details/130022288