Qt Quick Examples - Touch Interaction

This is a collection of QML Touch Interaction examples.

This is a collection of small QML examples relating to touch interaction methods.

Multipoint Flames demonstrates distinguishing different fingers in a MultiPointTouchArea, by assigning a different colored flame to each touch point. The MultipointTouchArea sets up multiple touch points:

    MultiPointTouchArea {
        anchors.fill: parent
        minimumTouchPoints: 1
        maximumTouchPoints: 5
        touchPoints: [
            TouchPoint { id: touch1 },
            TouchPoint { id: touch2 },
            TouchPoint { id: touch11 },
            TouchPoint { id: touch21 },
            TouchPoint { id: touch31 }
        ]
    }

The flames are then simply bound to the coordiates of the touch point, and whether it is currently pressed, like so:

    ParticleFlame {
        color: "red"
        emitterX: touch1.x
        emitterY: touch1.y
        emitting: touch1.pressed
    }

Bear-Whack demonstrates using a MultiPointTouchArea to add multiple finger support to a simple game. The interaction with the game is done through a SpriteGoal that follows the TouchPoint. The TouchPoints added to the MultiPointTouchArea are a component with all this logic embedded into it:

TouchPoint {
    id: container
    property ParticleSystem system
    onPressedChanged: {
        if (pressed) {
            timer.restart();
            child.enabled = true;
            system.explode(x,y);
        }
    }
    property QtObject obj: Timer {
        id: timer
        interval: 100
        running: false
        repeat: false
        onTriggered: child.enabled = false
    }
    property Item child: SpriteGoal {
        enabled: false
        x: container.area.x - 16
        y: container.area.y - 16
        width: container.area.width + 32
        height: container.area.height + 32 //+32 so it doesn't have to hit the exact center
        system: container.system
        parent: container.system
        goalState: "falling"
    }
}

Flick Resize uses a PinchArea to allow Pinch-to-Resize behavior. This is easily achieved just by listening to the PinchArea signals and responding to user input.

onPinchStarted: {
    initialWidth = flick.contentWidth
    initialHeight = flick.contentHeight
}

onPinchUpdated: {
    // adjust content pos due to drag
    flick.contentX += pinch.previousCenter.x - pinch.center.x
    flick.contentY += pinch.previousCenter.y - pinch.center.y

    // resize content
    flick.resizeContent(initialWidth * pinch.scale, initialHeight * pinch.scale, pinch.center)
}

onPinchFinished: {
    // Move its content within bounds.
    flick.returnToBounds()
}

Flickable is a simple example demonstrating the Flickable type. The object inside the flickable is very big, but the flickable itself is very small:

Rectangle {
width: 320
height: 480
Flickable {
    anchors.fill: parent
    contentWidth: 1200
    contentHeight: 1200
    Rectangle {
        width: 1000
        height: 1000

Corkboards shows a more complex Flickable usecase, with types on the flickable that respond to mouse and keyboard interaction. This doesn't require special code, the Qt Quick types automatically cooperate with Flickable for accepting the touch events.

Files: