QML MultiPointTouchArea

MultiPointTouchArea为qml中的多点触摸提供了最基本、最重要的支持，它与TouchPoint及相关域结合，可以说是qml中多点触摸的基石。

MultiPointTouchArea是不可见元素，它用来跟踪多点触摸。从Item继承过来的enabled属性用来标识触点操作是否有效。如果该属性为false，则触摸区域将忽略鼠标以及触摸事件。

默认情况下，鼠标的处理方式与单个触摸点的处理方式相同，触摸区域下的项目不会接收鼠标事件，因为触摸区域正在处理它们。 但是，如果mouseEnabled属性设置为false，则它对鼠标事件变得透明，以便可以使用另一个鼠标敏感项（例如MouseArea）分别处理鼠标交互。

MultiPointTouchArea有两种使用方式：

• setting touchPoints to provide touch point objects with properties that can be bound to
• using the onTouchUpdated or onPressed, onUpdated and onReleased handlers

Properties:

• maximumTouchPoints : int 触点的最大数目
• minimumTouchPoints : int 触点的最小数目
• mouseEnabled : bool 是否响应鼠标点击事件(默认为true)
• touchPoints : list 触点的容器

Signals：

• canceled(list touchPoints)
• gestureStarted(GestureEvent gesture)
• pressed(list touchPoints)
• released(list touchPoints)
• touchUpdated(list touchPoints)
• updated(list touchPoints)

TouchPoint

用于描述MultiPointTouchArea中的触点。

       ###Properties：

• area : rectangle
• pointId : int
• pressed : bool
• pressure : real
• previousX : real
• previousY : real
• sceneX : real
• sceneY : real
• startX : real
• startY : real
• velocity : vector2d
• x : real
• y : real

例子：

qml Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

import QtQuick 2.12 import QtQuick.Window 2.12 Window {     visible : true     width : 640     height : 480     title : qsTr("MultiPointTouchArea")     Rectangle     {         width : parent.width         height : parent.height         MultiPointTouchArea         {             anchors.fill : parent             mouseEnabled : false             maximumTouchPoints : 3             minimumTouchPoints : 1             touchPoints : [                 TouchPoint                 {                     id : point1                 },                 TouchPoint                 {                     id : point2                 },                 TouchPoint                 {                     id : point3                 }             ]         }         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         }         Rectangle         {             width : 30             height : 30             color : "red"             x : point3.x             y : point3.y         }     }

Qt官方例子：

Touch Interaction中的

• Multipoint Flames

　　多手指触摸实现绚烂的粒子效果

• Bear-Whack

　　多手指触摸多个小熊，批量阻止小熊的降落