Image Pinch Zooming
Changelog-Added: Added pinch to zoom on images
This commit is contained in:
@@ -64,9 +64,50 @@ struct ImageContextMenuModifier: ViewModifier {
|
||||
}
|
||||
}
|
||||
|
||||
struct ImageViewer: View {
|
||||
struct ImageView: View {
|
||||
let urls: [URL]
|
||||
|
||||
@Environment(\.presentationMode) var presentationMode
|
||||
//let pubkey: String
|
||||
//let profiles: Profiles
|
||||
|
||||
@GestureState private var scaleState: CGFloat = 1
|
||||
@GestureState private var offsetState = CGSize.zero
|
||||
|
||||
@State private var offset = CGSize.zero
|
||||
@State private var scale: CGFloat = 1
|
||||
|
||||
func resetStatus(){
|
||||
self.offset = CGSize.zero
|
||||
self.scale = 1
|
||||
}
|
||||
|
||||
var zoomGesture: some Gesture {
|
||||
MagnificationGesture()
|
||||
.updating($scaleState) { currentState, gestureState, _ in
|
||||
gestureState = currentState
|
||||
}
|
||||
.onEnded { value in
|
||||
scale *= value
|
||||
}
|
||||
}
|
||||
|
||||
var dragGesture: some Gesture {
|
||||
DragGesture()
|
||||
.updating($offsetState) { currentState, gestureState, _ in
|
||||
gestureState = currentState.translation
|
||||
}.onEnded { value in
|
||||
offset.height += value.translation.height
|
||||
offset.width += value.translation.width
|
||||
}
|
||||
}
|
||||
|
||||
var doubleTapGesture : some Gesture {
|
||||
TapGesture(count: 2).onEnded { value in
|
||||
resetStatus()
|
||||
}
|
||||
}
|
||||
|
||||
private struct ImageHandler: ImageModifier {
|
||||
@Binding var handler: UIImage?
|
||||
|
||||
@@ -86,30 +127,61 @@ struct ImageViewer: View {
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
TabView {
|
||||
ForEach(urls, id: \.absoluteString) { url in
|
||||
VStack{
|
||||
Text(url.lastPathComponent)
|
||||
|
||||
KFAnimatedImage(url)
|
||||
.configure { view in
|
||||
view.framePreloadCount = 3
|
||||
}
|
||||
.cacheOriginalImage()
|
||||
.imageModifier(ImageHandler(handler: $image))
|
||||
.loadDiskFileSynchronously()
|
||||
.scaleFactor(UIScreen.main.scale)
|
||||
.fade(duration: 0.1)
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.tabItem {
|
||||
Text(url.absoluteString)
|
||||
}
|
||||
.id(url.absoluteString)
|
||||
.modifier(ImageContextMenuModifier(url: url, image: image, showShareSheet: $showShareSheet))
|
||||
.sheet(isPresented: $showShareSheet) {
|
||||
ShareSheet(activityItems: [url])
|
||||
}
|
||||
|
||||
ZStack(alignment: .topLeading) {
|
||||
Color("DamusDarkGrey") // Or Color("DamusBlack")
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
|
||||
HStack() {
|
||||
Button {
|
||||
presentationMode.wrappedValue.dismiss()
|
||||
} label: {
|
||||
Image(systemName: "xmark")
|
||||
.foregroundColor(.white)
|
||||
.font(.largeTitle)
|
||||
.frame(width: 40, height: 40)
|
||||
.padding(20)
|
||||
}
|
||||
}
|
||||
.zIndex(1)
|
||||
|
||||
VStack(alignment: .center) {
|
||||
//Spacer()
|
||||
//.frame(height: 120)
|
||||
|
||||
TabView {
|
||||
ForEach(urls, id: \.absoluteString) { url in
|
||||
VStack{
|
||||
//Color("DamusDarkGrey")
|
||||
Text(url.lastPathComponent)
|
||||
.foregroundColor(Color("DamusWhite"))
|
||||
|
||||
KFAnimatedImage(url)
|
||||
.configure { view in
|
||||
view.framePreloadCount = 3
|
||||
}
|
||||
.cacheOriginalImage()
|
||||
.imageModifier(ImageHandler(handler: $image))
|
||||
.loadDiskFileSynchronously()
|
||||
.scaleFactor(UIScreen.main.scale)
|
||||
.fade(duration: 0.1)
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.tabItem {
|
||||
Text(url.absoluteString)
|
||||
}
|
||||
.id(url.absoluteString)
|
||||
.modifier(ImageContextMenuModifier(url: url, image: image, showShareSheet: $showShareSheet))
|
||||
.sheet(isPresented: $showShareSheet) {
|
||||
ShareSheet(activityItems: [url])
|
||||
}
|
||||
//.padding(100)
|
||||
.scaledToFit()
|
||||
.scaleEffect(self.scale * scaleState)
|
||||
.offset(x: offset.width + offsetState.width, y: offset.height + offsetState.height)
|
||||
.gesture(SimultaneousGesture(zoomGesture, dragGesture))
|
||||
.gesture(doubleTapGesture)
|
||||
|
||||
}.padding(.bottom, 50) // Ensure carousel appears beneath
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -151,8 +223,8 @@ struct ImageCarousel: View {
|
||||
}
|
||||
}
|
||||
.cornerRadius(10)
|
||||
.sheet(isPresented: $open_sheet) {
|
||||
ImageViewer(urls: urls)
|
||||
.fullScreenCover(isPresented: $open_sheet) {
|
||||
ImageView(urls: urls)
|
||||
}
|
||||
.frame(height: 200)
|
||||
.onTapGesture {
|
||||
@@ -164,6 +236,6 @@ struct ImageCarousel: View {
|
||||
|
||||
struct ImageCarousel_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
ImageCarousel(urls: [URL(string: "https://jb55.com/red-me.jpg")!])
|
||||
ImageCarousel(urls: [URL(string: "https://jb55.com/red-me.jpg")!,URL(string: "https://jb55.com/red-me.jpg")!])
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user