上一篇《Qt Quick事件處理之滑鼠、鍵盤、定時器》我們介紹了常見的滑鼠、鍵盤、定時器的處理，滑鼠、鍵盤都是電腦上我們最常使用的事件，這節我們來介紹 Android 智慧手機上的一個非常重要的手勢：捏拉手勢。捏拉手勢最早在蘋果手機上得到應用，蘋果還曾經嘗試為此操作申請專利，藉以鉗制三星在美國的手機和平板銷售。這些我們且不管它，咱們只說在 Qt Quick 中如何處理捏拉手勢。

    Qt Quick 中的 PinchArea 帶來捏拉手勢，看名字是不是和 MouseArea 類似？木錯，就是醬紫。先來看 PinchArea 都有哪些屬性和訊號，瞭解了這些才能使用它。

PinchArea簡介

    PinchArea 本身是一個不可見的 Item ，通常和一個可見的 Item 配合使用來處理捏拉手勢。比如和一個 Rectangle 一塊使用，或者和 Image 一塊使用實現圖片縮放、旋轉等效果。捏拉手勢識別實際上是通過對若干觸控事件的處理來實現的。

屬性

    PinchArea 是 Item 的派生類，除了繼承自 Item 的屬性外，還有兩個專屬屬性： enabled 和 pinch 。

    enabled 屬性預設值為 true ，如果你設定為 false ，那麼 PinchArea 就嘛事兒不幹，捏拉區域對滑鼠、觸控事件就變透明瞭。

    pinch 屬性知名與捏拉手勢的詳情，它是一個組合屬性，包括 target 、 active 、 minimumScale 、 maximumScale 、 minimumRotation 、 maximumRotation 、 dragAxis 、 minimumX 、 maximumX 、 minimumY 、 maximumY 等屬性。

    target 指明捏拉手勢要操作的 Item ， active （bool型別）屬性表示目標 Item 是否正在被拖動。

    minimumScale / maximumScale 設定最小、最大縮放係數。 minimuxRotation / maximumRotation 設定對小、最大旋轉角度。這四個屬性都是 real 型別。

    dragAxis 設定沿 X 軸（Pinch.XAxis） 、 Y 軸（Pinch.YAxis） 還是 XY （Pinch.XAndYAxis）兩個軸拖動，你也可以禁止拖動，只要給 dragAxis 賦值 Pinch.NoDrag 即可。當 dragAxis 允許拖動時，minimumX / maximumX 設定 X 軸的最小、最大拖動位置， minimumY / maximumY 設定 Y 軸的最小、最大拖動位置。

訊號

    PinchArea 有三個訊號：onPinchStarted() 、 onPinchUpdated() 、 onPinchFinished() 。它們都有一個名為 pinch 的引數，型別是 PinchEvent 。為了有效響應這些訊號，必須瞭解 PinchEvent 型別，我們先介紹它。

    PinchEvent 具有下列屬性：

• accepted ，在 onPinchStarted() 訊號處理器中設定為 true 表明你要響應 PinchEvent ，Qt 會持續發給你更新事件；設定為 false ，Qt 就不會再發 PinchEvent 事件給你了。
• angle ，表示最近兩個觸點之間的角度， previousAngle 是上一次事件的角度， rotation 是從捏拉手勢開始到當前事件的總的旋轉角度。
• scale ，表示最近兩個觸點之間的縮放係數， previousScale 是上一次事件的縮放係數。
• center ，兩個觸點的中心點， previousCenter 是上一次事件的中心點， startCenter 是事件開始時的中心點。
• point1 ， point2 儲存當前觸點的位置， startPoint1 ， startPoint2 儲存第二個觸點按下時兩個觸點的位置。
• pointCount 儲存到現在為止的觸點總數。

    onPinchStarted() 訊號在第一次識別到捏拉手勢時發出，如果你要處理它，那就要將其設定為 true 。然後就可以通過 pinch 引數來設定要變換的 Item 了。

    當你在 onPinchStarted() 的訊號處理器中接受了 TouchEvent 事件，那麼 Qt 就會不斷的傳送新事件給你， onPinchUpdated() 訊號就會不斷的發射，你可以在它的訊號處理器中通過 pinch 引數，擷取你需要的值來更新你的 Item 。

    onPinchFinished() 訊號在使用者手指離開螢幕時觸發。

怎樣使用

    介紹了 PinchArea 和 PinchEvent ，是時候看看怎麼使用它們了。

    要想使用 PinchArea 來變換一個 Item ，有兩個辦法：

1. 設定 target 屬性，將其指向要變換的 Item ，然後 PinchArea 就會在合適的時候幫你變換它。
2. 處理 onPinchStarted() / onPinchUpdated() / onPinchFinished() 訊號，在訊號處理器中變換目標 Item 。這種方式更靈活，你甚至可以同時處理多個 Item 。

    選定一種方式後，你可能還要配置 PinchArea.pinch 屬性，給不同的引數設定合理的值，比方說最大可以放大到多少倍。

縮放與旋轉例項

    這裡提供一個簡單的使用 PinchArea 的例項，我們用 PinchArea 來旋轉和縮放一個矩形。

使用 pinch.target

    我們先用第一種方式，指定 pinch.target 。直接看 main.qml 文件吧：

import QtQuick 2.0

Rectangle {
    width: 360;
    height: 360;
    focus: true;
    Rectangle {
        width: 100;
        height: 100;
        color: "blue";
        id: transformRect;
        anchors.centerIn: parent;
    }
    PinchArea {
        anchors.fill: parent
        pinch.maximumScale: 20;
        pinch.minimumScale: 0.2;
        pinch.minimumRotation: 0;
        pinch.maximumRotation: 90;
        pinch.target: transformRect;
    }
}

    圖 1 是在 Android 手機上執行的起始效果：

            圖 1 pinchArea 示例啟動效果

    圖 2 是我兩個指頭捏拉 了幾下後的效果：

            圖 2 pinchArea 縮放與旋轉效果

    使用 pinch.target 這種方式，你什麼都不用關心，甚至不需要弄明白 pinch 屬性到底是什麼含義，就可以得到一個不錯的變換效果， Qt Quick 預設幫你處理所有的事情。

    下面看看使用訊號的方式。

使用訊號

    使用 onPinchStarted() / onPinchUpdated() / onPinchFinished() 要稍微麻煩一些，你必須要了解 PinchEvent 每個引數的含義，自己設計變換策略。不過好處是，七十二般變化都由你控制。

    直接看新的 main.qml 文件：

import QtQuick 2.0

Rectangle {
    width: 360;
    height: 360;
    focus: true;
    Rectangle {
        width: 100;
        height: 100;
        color: "blue";
        id: transformRect;
        anchors.centerIn: parent;
    }
    PinchArea {
        anchors.fill: parent
        pinch.maximumScale: 20;
        pinch.minimumScale: 0.2;
        pinch.minimumRotation: 0;
        pinch.maximumRotation: 90;

        onPinchStarted: {
            pinch.accepted = true;
        }
        onPinchUpdated: {
            transformRect.scale *= pinch.scale;
            transformRect.rotation += pinch.rotation;
        }
        onPinchFinished: {
            transformRect.scale *= pinch.scale;
            transformRect.rotation += pinch.rotation;
        }
    }
}

    OK，這篇到此結束。

    回顧一下：