C
Qt Quick Ultralite swipe_game Demo
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick 2.0
import StyleModule 1.0
import SwipeModule 1.0
/*
This component provides vertical/horizontal gesture recognition.
Set the direction property to define which swipe direction should be checked.
*/
Item {
id: root
// NOTE: overwrite the Style and Globals value assignments if you want to use the component outside of this project
// determines the size of the internal MouseArea.
property int areaSize: Globals.useSmallTouchAreas ? Style.swipeAreaSizeSmall : Style.swipeAreaSizeDefault
// determines the required distance in pixels for a gesture to be recognized as a swipe
property int threshold: Style.swipeThreshold
// the image used for visual feedback. Set to empty string if you want to try this component outside of this project
property string highlightSource: "mask_circle_highlight_small_right.svg"
// can be activated in the config view as a guide for users
property bool showTouchArea: Globals.showTouchAreas
// determines the swipe direction this area will detect
property int direction: Swipe.Direction.Left
signal triggered()
implicitWidth: Style.appSize
implicitHeight: Style.appSize
states: [
State {
name: "Left"
when: direction === Swipe.Direction.Left
PropertyChanges {
target: mouseArea
anchors {
leftMargin: width - root.areaSize
rightMargin: 0
topMargin: 0
bottomMargin: 0
}
}
},
State {
name: "Right"
when: direction === Swipe.Direction.Right
PropertyChanges {
target: mouseArea
anchors {
leftMargin: 0
rightMargin: width - root.areaSize
topMargin: 0
bottomMargin: 0
}
}
},
State {
name: "Up"
when: direction === Swipe.Direction.Up
PropertyChanges {
target: mouseArea
anchors {
leftMargin: 0
rightMargin: 0
topMargin: height - root.areaSize
bottomMargin: 0
}
}
},
State {
name: "Down"
when: direction === Swipe.Direction.Down
PropertyChanges {
target: mouseArea
anchors {
leftMargin: 0
rightMargin: 0
topMargin: 0
bottomMargin: height - root.areaSize
}
}
}
]
QtObject {
id: internal
property int startX: 0
property int startY: 0
property bool triggered: false
}
MouseArea {
id: mouseArea
anchors.fill: parent
onPressed: {
internal.startX = mouseX
internal.startY = mouseY
internal.triggered = false
}
onPositionChanged: {
if (internal.triggered) {
return
}
if (Swipe.detectDirection(mouseX, mouseY, internal.startX, internal.startY, root.threshold) != Swipe.Direction.None)
{
triggered();
internal.triggered = true
}
}
// can be activated in the config view as a guide for users
Rectangle {
id: areaVisualizer
anchors.fill: parent
color: "magenta"
opacity: 0.4
visible: root.showTouchArea
}
}
Image {
id: highlight
anchors.fill: parent
source: root.highlightSource
rotation: {
switch (direction) {
case Swipe.Direction.Right: 180; break
case Swipe.Direction.Left: 0; break
case Swipe.Direction.Up: 90; break
case Swipe.Direction.Down: -90; break
default: 0
}
}
visible: mouseArea.pressed
}
}