How to detect multiple drag gestures?

Question

Created Dec ’23

Replies 3

Boosts 0

Views 1k

Participants 2

Hi, I have a code snippet as below that creates a draggable circle when a drag gesture is performed, and the circle disappears when the drag gesture is released. I'm wondering how I can make it detect multiple drag gestures. More specifically, when a finger is performing drag gesture, if another finger presses the screen at this time, a new circle will be generated.

struct ContentView: View {
    enum DragState {
        case inactive
        case active(position: CGPoint)
        
        var location: CGPoint {
            switch self {
            case .inactive:
                return .zero
            case .active(let position):
                return position
            }
        }
        
        var isActive: Bool {
            switch self {
            case .inactive:
                return false
            case .active:
                return true
            }
        }
    }
    
    @GestureState private var state: DragState = .inactive
    
    var body: some View {
        ZStack {
            Color.clear.contentShape(Rectangle())
            if state.isActive {
                Circle()
                    .frame(width: 100, height: 100)
                    .foregroundStyle(.blue)
                    .position(state.location)
            }
        }
        .gesture(dragGesture)
    }
    
    private var dragGesture: some Gesture {
        DragGesture(minimumDistance: 0)
            .updating($state) { value, state, _ in
                state = value.location == .zero ? .inactive : .active(position: value.location)
            }
    }
}

Answered by -CJ in 774378022

For anyone encountering the same problem, you may refer to the link: https://stackoverflow.com/questions/61566929/swiftui-multitouch-gesture-multiple-gestures

Boost

Answer 1

Claude31 OP

Dec ’23

If I understand your question correctly, you should use .simultaneousGesture modifier.

See her how to: https://www.hackingwithswift.com/quick-start/swiftui/how-to-make-two-gestures-recognize-at-the-same-time-using-simultaneousgesture

0

Answer 2

-CJ OP

Dec ’23

@Claude31 thank you for your comment. I apologize if my question is unclear. My objective is to create a gesture event that generates as many draggable circles as there are fingers touching the screen. Each finger is able to move its corresponding circle position and change circle status(show or hide) w/o affecting other circles. I edited my code using .simultaneousGesture modifier as shown below but ran into couple issues:

Performing a drag gesture with one finger triggers both drag states to be 'active', which is not what I want. Each finger should only trigger its corresponding drag state to be 'active'.
There is no circle or only one circle generated when performing a drag gesture with two or more fingers. The number of circles generated should be the same as the number of fingers used to perform the drag gesture.
When a finger is currently performing a drag gesture, performing a new drag gesture with another finger will cause the initial drag state to be "Inactive". I want the drag gesture to be considered ended only when the finger is lifted off the screen.


    @GestureState private var state1: DragState = .inactive
    @GestureState private var state2: DragState = .inactive
    
    var body: some View {
        ZStack {
            Color.clear.contentShape(Rectangle())
            VStack {
                Text(state1.isActive.description)
                Text(state2.isActive.description)
            }
            if state1.isActive {
                Circle()
                    .frame(width: 100, height: 100)
                    .position(state1.location)
            }
            if state2.isActive {
                Circle()
                    .frame(width: 100, height: 100)
                    .position(state2.location)
            }
        }
        .foregroundStyle(.blue)
        .gesture(dragGestures)
    }
    
    private var dragGestures: some Gesture {
        dragGesture1.simultaneously(with: dragGesture2)
    }
    
    private var dragGesture1: some Gesture {
        DragGesture(minimumDistance: 0)
            .updating($state1) { value, state, _ in
                state = value.location == .zero ? .inactive : .active(position: value.location)
            }
    }
    
    private var dragGesture2: some Gesture {
        DragGesture(minimumDistance: 0)
            .updating($state2) { value, state, _ in
                state = value.location == .zero ? .inactive : .active(position: value.location)
            }
    }

0

Answer 3

-CJ OP

Dec ’23

Accepted Answer

For anyone encountering the same problem, you may refer to the link: https://stackoverflow.com/questions/61566929/swiftui-multitouch-gesture-multiple-gestures

0