在旋转视图上调整拖动手势

Posted 2023-03-13

【中文标题】在旋转视图上调整拖动手势

【英文标题】：Adjust Drag Gesture on Rotated View

【发布时间】：2021-10-09 08:03:00

【问题描述】：

我有一个视图上的图像。

添加旋转以旋转视图 添加了拖动手势以平移图像 图像未旋转时，拖动手势可以正常工作 一旦视图旋转到某个角度，拖动手势就会受到干扰，因为视图已旋转。

那么，如何根据旋转角度调整dragOffset和位置？

代码：

struct ImageView: View 
    @State private var dragOffset: CGSize = .zero
    @State private var position: CGSize = .zero
    
    @State private var currentRotation: Angle = .zero
    @GestureState private var twistAngle: Angle = .zero
    
    public var body: some View 
        let rotationGesture = RotationGesture(minimumAngleDelta: .degrees(10))
            .updating($twistAngle, body:  (value, state, _) in
                state = value
            )
            .onEnded self.currentRotation += $0 
        
        let dragGesture = DragGesture()
            .onChanged( (value) in
                self.dragOffset = value.translation
            )
            .onEnded( (value) in
                self.position.width += value.translation.width
                self.position.height += value.translation.height
                self.dragOffset = .zero
            )
        
        let gestures = rotationGesture
            .simultaneously(with: dragGesture)
        
        Image.placeholder320x192
            .offset(x: dragOffset.width + position.width, y: dragOffset.height + position.height)
            .rotationEffect(currentRotation + twistAngle)
            .gesture(gestures, including: .gesture)
    

【问题讨论】：

不是很清楚你需要什么。旋转只是一种视觉效果，视图的框架和坐标系（包括在事件中使用，在这种情况下拖动）保持不变。

@Asperi - 当我从上到下拖动视图时，它应该从上到下拖动，但由于视图是旋转的，视图会以旋转角度平移/拖动，这对用户不友好。

【参考方案1】：

修饰符的顺序很重要。您当前有 offset before 旋转 - 因此您正在应用偏移 then 旋转。这使得偏移出现在一个角度。相反，您想旋转然后偏移。

变化：

Image.placeholder320x192
    .offset(x: dragOffset.width + position.width, y: dragOffset.height + position.height)
    .rotationEffect(currentRotation + twistAngle)
    .gesture(gestures, including: .gesture)

到这里：

Image.placeholder320x192
    .rotationEffect(currentRotation + twistAngle)
    .offset(x: dragOffset.width + position.width, y: dragOffset.height + position.height)
    .gesture(gestures, including: .gesture)

【讨论】：

完美！虽然我有一个尾随查询，但我的视图在播放后“同时”添加触摸和放大手势时不会响应触摸。添加两个以上的手势是否正确？

@Bista 是的，根据需要添加任意数量的转换和手势