-
Notifications
You must be signed in to change notification settings - Fork 0
2.05
Explanation of the contents of a topic page @ Topic reference page
Objective: Handling multiple touch events in a single item
Comment: Handling multiple touches in a single item (adding a MouseArea and PinchArea on the top of an item does not work. Using handlers we can solve this problem)
- Can you use a MouseArea and a PinchArea on the top of the same Rectangle?
- How do you handle multiple touch events in one item?
- How are handlers beneficial to MultiPointTouchArea?
K: this needs to be introduced better I think...
Qt Quick has multiple types that can handle touch events:
- MouseArea: the basic mouse interaction handler
- PinchArea: handles two-finger scaling, rotation and dragging
- MultiPointTouchArea: declared touchpoints can be bound to items
These Area items have some issues due to architectural decisions in Qt and Qt Quick. The issue with MouseArea is that Qt assumes there is only one mouse, "core pointer" and QMouseEvent and QTouchEvents are considered the same events inside Qt Quick. The result is that you cannot interact with two MouseAreas or Flickables at the same time. With our previous MouseArea usecases this means that you cannot press two Buttons at the same time or drag two Sliders a the same time, for example. This also means that you cannot use PinchArea and MouseArea together, as when PinchArea is active it wont pass the events to the MouseArea.
To fix the issue, Qt introduced the new Pointer Handler types in Qt 5.10! Pointer Handlers can be declared inside any Item type and they can handle events from any pointing devices on behalf of the parent. They are very lightweight types, they are intended to be declared as a handler for each interaction type there might exist. Each Item can have unlimited Handler types, so you wont run out of them.
You can declare constraints on what kind of interaction the handler is going to react on, whether it is a touch event, mouse button or a modifier key is active. This is done with the properties acceptedButtons and acceptedDevices where one can select the accepted Qt::MouseButtons or the accepted pointer devices like PointerDevice.Mouse, PointerDevice.Stylus or PointerDevice.TouchScreen.
To use these new experimental handlers, we need to import from Qt.labs.handlers 1.0. There are multiple handlers implemented in Qt 5.10, we are going to go through a few of them here.
TapHandler is comparable to MouseArea with a few key differences:
import Qt.labs.handlers 1.0
Item {
TapHandler {
acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus
onTapped: console.log("left clicked")
}
TapHandler {
acceptedDevices: PointerDevice.TouchScreen
onTapped: console.log("tapped")
}
TapHandler {
acceptedButtons: Qt.RightButton
onTapped: console.log("right clicked")
}
}
We can now accept events from specific devices and react accordingly. As mentioned, there can be also multiple TapHandlers active inside the same Item.
DragHandler is similar to the MouseArea drag property, but more straightforward to use:
import Qt.labs.handlers 1.0
Rectangle {
width: 50
height: 50
color: "green"
DragHandler { }
}It has the similar xAxis and yAxis property groups as the MouseArea.
There is also a PointHandler which can be used to track a touch point:
import Qt.labs.handlers 1.0
Item {
id: root
PointHandler {
id: handler
acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus
target: Rectangle {
parent: root
color: "blue"
visible: handler.active
x: handler.point.position.x - width / 2
y: handler.point.position.y - height / 2
width: 20
height: width
radius: width / 2
}
}
}
When a press event occurs, the handler will choose a point that has not been bound to any other handlers. It will check if the constraints given (acceptedDevices etc.) are satisfied and it is eligible for the point. It will then track the point with the property active as true until release. Like other handlers, it has the target property where we have placed an Rectangle and bound the handler properties.