PinchArea and MouseArea working together

Not the simplest task, even though it should be the most natural thing since working with a touch based interaction. Anyhow here is a snippet that makes it possible to work with both PinchArea and MouseArea, on the same areas and respond to their specific interactions.

Originally I started this story already in early 2011, but never got around to finish. Now closing the end of first half of 2012, it was about time.

Please note that the PinchArea was introduced in QtQuick version 1.1, which was released with Qt 4.7.4 in 1st September 2011 and so far the only device that comes with those preinstalled is the Nokia N9.

PinchArea uses essentially two touch points. In case there is just one, according to the source, it will move the center position of the given pinch event to that.

PinchArea placed inside MouseArea will disable the MouseArea completely, but placing them other way around will work nicely, as in the example code linked.

Source code example PinchMouseArea.qml now available at GitHub

In case you would be pinching the touch screen of the device where the example code is running, the events occurring would be somewhat of the following, as shown via the text field in the example code:

  1. MouseArea onEntered
  2. MouseArea onPressed
  3. MouseArea onPositionChanged
  4. PinchArea onPinchStarted
  5. MouseArea onCanceled
  6. PinchArea onPinchUpdated
  7. PinchArea onPinchUpdated
  8. PinchArea onPinchFinished

Learnings from the output: MouseArea will receive pressed state before pinch will overwrite it.

Follow up the future development, for example via this bug report against Qt 5.