如何使用Ubuntu手機中的手勢來放大或縮小圖片，ubuntu手勢

如何使用Ubuntu手機中的手勢來放大或縮小圖片，ubuntu手勢

對於一些應用來說，我們希望使用手勢來做一些動作。比如利用手勢來放大圖片，或旋轉圖片。對於pdf閱讀器來說也是一個好的方法來放大自己的字型。在這篇文章中，我們來介紹如何使用手勢。

在QML中，有一個元素PinchArea。在這篇文章中也有一些介紹“Qt Quick 事件處理之捏拉縮放與旋轉”。這裡不再累述，我們直接貼上我們的常式：

import QtQuick 2.0import Ubuntu.Components 1.1/*!    \brief MainView with a Label and Button elements.*/MainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "pinch.ubuntu"    /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true    // Removes the old toolbar and enables new features of the new header.    useDeprecatedToolbar: false    width: units.gu(50)    height: units.gu(75)    Page {        id:main        title: i18n.tr("Simple")        Flickable {            id: flick            anchors.fill: parent            contentWidth: 768            contentHeight: 1024            PinchArea {                width: Math.max(flick.contentWidth, flick.width)                height: Math.max(flick.contentHeight, flick.height)                pinch.maximumScale: 20;                pinch.minimumScale: 0.2;                pinch.minimumRotation: 0;                pinch.maximumRotation: 1;                property real initialWidth                property real initialHeight                onPinchStarted: {                    initialWidth = flick.contentWidth                    initialHeight = flick.contentHeight                }                onPinchUpdated: {                    // adjust content pos due to drag                    flick.contentX += pinch.previousCenter.x - pinch.center.x                    flick.contentY += pinch.previousCenter.y - pinch.center.y                    console.log("rotation: " + pinch.rotation );                    if ( pinch.rotation > 0 )                        flick.rotation += 0.2;                    else                        flick.rotation -= 0.2;                    // resize content                    flick.resizeContent(initialWidth * pinch.scale, initialHeight * pinch.scale, pinch.center)                }                onPinchFinished: {                    // Move its content within bounds.                    flick.returnToBounds()                }                Rectangle {                    width: flick.contentWidth                    height: flick.contentHeight                    color: "white"                    Image {                        id: image                        anchors.fill: parent                        source: "images/sky.jpg"                        MouseArea {                            anchors.fill: parent                        }                    }                }            }        }    }}

運行我們的應用，可以看到如下的畫面:

    

整個項目的源碼在：git clone https://gitcafe.com/ubuntu/pinch.git