In the app I'm working on the user can select an image from their library and add it to an event. The code is written entirely in SwiftUI but I am using a UIViewControllerRepresentable
for the ImagePicker. That piece of code was directy from the 100DaysOfSwiftUI "Instafilter" project.
If the user has already selected an image its uuid is stored in CoreData and returned from this method as a small thumbnail view. And now that I write this I see I need to fix that force-unwrap. I'll do it!
Thumbnail
loadUserImage(uuid: savedRunEvent.imageID!)
.resizable()
.scaledToFill()
.frame(width: 90, height: 90, alignment: .center)
.cornerRadius(20)
.shadow(radius: 2)
.onTapGesture { self.showImagePopup = true }
If the user taps the thumbnail image they are presented with a popup view with a large-scale version of the image. That image is displayed inside a .frame()
VStack {
// The popup
if willShowImagePopUp {
ZStack {
Color.secondary
.opacity(0.5)
.edgesIgnoringSafeArea(.all)
VStack(spacing: 15) {
Spacer()
image
.resizable()
.scaledToFit()
.cornerRadius(20)
.shadow(radius: 2)
Button("Change Photo") {
self.showImagePicker = true
}
.font(.headline)
.padding(.bottom)
.frame(maxWidth: .infinity)
}
.shadow(radius: 10)
.background(Color.white)
.cornerRadius(20)
.padding(.horizontal, 25)
.frame(height: 500)
.offset(dragOffset)
.rotationEffect(Angle(degrees: Double(dragOffset.width / 2)), anchor: .bottom)
.gesture(DragGesture(minimumDistance: 25).updating($dragOffset, body: { (value, popupOffset, transaction) in
popupOffset = value.translation
}).onEnded({ value in
self.willShowImagePopUp = false
}))
}.animation(.default)
}
Spacer()
}
Full
Most pictures display properly but some become stretched along the x-axis. I cannot find a rhyme or reason behind which images display properly and which do not. One theory I have is lower quality images become stretched, but I am not certain. Any insights are appreciated.
Here is an example of a distorted image.
Distorted