Detect left or right swipe through MouseArea Qt QML

Question

I've the problem, how to detect swipe through MouseArea in qml ?

This code, from documentation:

    Rectangle {
    id: container
    width: 600; height: 200

    Rectangle {
        id: rect
        width: 500; height: 500

        MouseArea {
            anchors.fill: parent
            drag.target: rect
            drag.axis: Drag.XAxis
            drag.minimumX: 0
            drag.maximumX: container.width - rect.width

            //event slide here ?
        }
    }
}

but i didn't understood how to get left or right swipe, i get this use in the mobile application (ios & android).

Somebody can help me ? Thanks. How to detect left or right swipe with finger? Thanks.

Answer 1

Just like derM explained the series of an event : Touch -> Movement -> Release
Here is my solution to that concept. Working Pretty Fine!!

MouseArea {
            width: 100
            height: 50
            preventStealing: true
            property real velocity: 0.0
            property int xStart: 0
            property int xPrev: 0
            property bool tracing: false
            onPressed: {
                xStart = mouse.x
                xPrev = mouse.x
                velocity = 0
                tracing = true
                console.log( " pressed  "+xStart)
                console.log( " pressed  "+xPrev)
            }
            onPositionChanged: {
                if ( !tracing ) return
                var currVel = (mouse.x-xPrev)
                velocity = (velocity + currVel)/2.0
                xPrev = mouse.x
                if ( velocity > 15 && mouse.x > parent.width*0.2 ) {
                    tracing = false
                    console.log( " positioned  ")
                    // SWIPE DETECTED !! EMIT SIGNAL or DO your action
                }
            }
            onReleased: {
                tracing = false
                if ( velocity > 15 && mouse.x > parent.width*0.2 ) {
                    // SWIPE DETECTED !! EMIT SIGNAL or DO your action
                    console.log("abcccccccccc")
                }
            }
        }
    }

Answer 2

A swipe is a simple chain of events:

Touch -> Movement -> Release

So this is exactly how you detect it:

You initialize some variables (e.g. originX/Y) onPressed, then you detect movement onPositionChanged, calculate the vector between origin and current position, analyze length and direction to evaluate the direction and velocity. Set originX/Y to the new position and continue until onReleased. Then you can determine whether it was a swipe (depending on the last vector or on the history of the movement - store or accumulate the calculated vectors in some way for this)

Things you need to consider: The last movement might be short for the user slows down just before release or because in between two steps he releases. So considering only the last vector might yield bad results.

Instead you might accumulate the last n vectors, applying some weight.

Also you might improve if you replace the onPositionChanged by a Timer to have longer intervals to analyze. You can play with the interval to find a optimal behavior.

For it is not trivial to implement a finely tuned algorithm for the detection, I recommend to reconsider, whether it is necessary to implement the detection yourself, or whether on of the many Items that have a swipe behavior implemented might suffice.