QT MultiPointTouchArea doesn't work

Question

I'm trying to get the MultiPointTouchArea working... I found the really basic example on QT:

http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-multipointtoucharea.html

import QtQuick 2.0

Rectangle {
width: 400; height: 400
MultiPointTouchArea {
    anchors.fill: parent
    touchPoints: [
        TouchPoint { id: point1 },
        TouchPoint { id: point2 }
    ]
}

Rectangle {
    width: 30; height: 30
    color: "green"
    x: point1.x
    y: point1.y
}

Rectangle {
    width: 30; height: 30
    color: "yellow"
    x: point2.x
    y: point2.y
}
}

But if I move the mouse nothing happens... The position is alway x = 0, y = 0. But the documentation tell me: "The Item::enabled property is used to enable and disable touch handling. When disabled, the touch area becomes transparent to mouse/touch events." So the MultiPointTouchArea isn't disabled so it should work? Or am I wrong?

Answer 1

I tried your code as is on my Android tablet, and it works just fine. First finger controls moves the green rectangle and the second finger moves the yellow rectangle. I'm on Qt 5.4 (the latest as of now)

Are you running this example on a tablet or a desktop computer? If you are on desktop using a regular mouse, it is only possible to move your green rectangle while pressing the left mouse button. touch requires a mouse press to work.

What exactly are you trying to achieve? It looks like what you really want is a MouseArea with hoverEnabled set to true.

Try this:

import QtQuick 2.0

Rectangle {
    width: 400; height: 400

    property point point1;
    property point point2;

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true

        onPositionChanged: {
            if (pressed)
            {
                parent.point1.x = mouse.x;
                parent.point1.y = mouse.y;
            }
            else
            {
                parent.point2.x = mouse.x;
                parent.point2.y = mouse.y;
            }
        }
    }

    Rectangle {
        width: 30; height: 30
        color: "green"
        x: parent.point1.x
        y: parent.point1.y
    }

    Rectangle {
        width: 30; height: 30
        color: "yellow"
        x: parent.point2.x
        y: parent.point2.y
    }
}