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

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