SwiftUI无法对图像进行PanGesture手势操作。

Question

我无法在SwiftUI中找到与Pan手势等效的功能。 我看到并使用了放大，点击，拖动和旋转手势，但是没有看到内置的Pan手势。在下面的代码片段中，我添加了一张图片并允许用户缩放 - 但我希望用户还能移动缩放后的图像以聚焦于感兴趣的区域。当然，拖动手势不能完成这项任务，它只会移动框架。

我尝试将框架叠加在顶部并移动底部图像，但也无法使其工作。

 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）

- JohnSF

Answer 1

为了使其更简单易读，我创建了一个扩展程序/修改器。

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()

- Gent

Answer 2

对于其他人来说，这很简单。确保在允许拖动之前完成放大镜效果 - 它将像平移一样工作。首先定义拖动手势：

    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)

- JohnSF

Answer 3

我来晚了，但如果有人在寻找答案，请尝试这个方法，因为它对我很有效。你需要做的是，在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)}

有任何问题请告诉我

- A4_TS