[英]SwiftUI Can't PanGesture an Image
我無法在 SwiftUI 中找到與平移手勢等效的方法。 我確實看到並使用了放大、點擊、拖動和旋轉 - 但我沒有看到任何內置的平底鍋。 在下面的代碼片段中,我添加了一個圖像並允許用戶縮放 - 但我希望用戶也移動縮放后的圖像以專注於感興趣的區域。 拖動當然不能完成這項工作 - 它只是移動框架。
我嘗試在頂部分層一個框架並移動底部圖像,但也無法使其工作。
struct ContentView: View {
@State var scale: CGFloat = 1.0
@State var isScaled: Bool = false
@State private var dragOffset = CGSize.zero
var body: some View {
GeometryReader { geo in
VStack {
ZStack{
RoundedRectangle(cornerRadius: 40)
.foregroundColor(Color.white)
.frame(width: geo.size.width - 45, height: geo.size.width - 45)
.shadow(radius: 10)
Image("HuckALaHuckMedium")
.resizable()
.scaleEffect(self.scale)
.frame(width: geo.size.width - 60, height: geo.size.width - 60)
.cornerRadius(40)
.aspectRatio(contentMode: .fill)
.shadow(radius: 10, x: 20, y: 20)
//need pan not drag
.gesture(
DragGesture()
.onChanged { self.dragOffset = $0.translation }
.onEnded { _ in self.dragOffset = .zero }
)
//this works but you can't "zoom twice"
.gesture(MagnificationGesture()
.onChanged { value in
self.scale = self.isScaled ? 1.0 : value.magnitude
}
.onEnded({ value in
//self.scale = 1.0
self.isScaled.toggle()
})
)
.animation(.easeInOut)
.offset(self.dragOffset)
}//zstack
Spacer()
}
}
}
}
原始圖像示例:
縮放后的圖像 - 但拖動而不是平移:
任何指導將不勝感激。 Xcode 11.3 (11C29)
為了使它更簡單和更易讀,我為此創建了一個擴展/修飾符
struct DraggableView: ViewModifier {
@State var offset = CGPoint(x: 0, y: 0)
func body(content: Content) -> some View {
content
.gesture(DragGesture(minimumDistance: 0)
.onChanged { value in
self.offset.x += value.location.x - value.startLocation.x
self.offset.y += value.location.y - value.startLocation.y
})
.offset(x: offset.x, y: offset.y)
}
}
extension View {
func draggable() -> some View {
return modifier(DraggableView())
}
}
現在你要做的就是調用修飾符:
Image(systemName: "plus")
.draggable()
為他人。 這真的很簡單。 確保在允許拖動之前完成放大 - 它會像平底鍋一樣工作。 首先定義拖動手勢:
let dragGesture = DragGesture()
.onChanged { (value) in
self.translation = value.translation
}
.onEnded { (value) in
self.viewState.width += value.translation.width
self.viewState.height += value.translation.height
self.translation = .zero
}
然后創建一個 @State 值,在激活放大手勢后將其切換為 true。 當您將手勢附加到圖像時,請有條件地執行此操作:
.gesture(self.canBeDragged ? dragGesture : nil)
我有點晚了,但是對於任何正在尋找的人,請嘗試一下,因為它對我有用。 您想要做的是在縮小 MagnificationGesture.onChanged() 生命周期后立即更改圖像的偏移量。
var magnification: some Gesture {
MagnificationGesture()
.updating($magnifyBy) {
.....
}
.onChanged() { _ in
//Zoom Out value of magnifyBy < 1.0
if self.magnifyBy <= 0.6{
//Change offset of image after zoom out to center of screen
self.currentPosition = CGSize(width: 1.0, height: 1.0)
}
self.newPosition = self.currentPosition
}
.onEnded{
.....
} }
var body: some View{
Image()
.offset(x: self.currentPosition.width, y: self.currentPosition.height)}
任何問題請讓我知道
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.