对于一些应用来说,我们希望使用手势来做一些动作。比如利用手势来放大图片,或旋转图片。对于pdf阅读器来说也是一个好的方法来放大自己的字体。在这篇文章中,我们来介绍如何使用手势。
在QML中,有一个元素PinchArea。在这篇文章中也有一些介绍“Qt Quick 事件处理之捏拉缩放与旋转”。这里不再累述,我们直接贴上我们的例程:
import QtQuick 2.0
import 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
}
}
}
}
}
}
}
整个项目的源码在:https://github.com/liu-xiao-guo/pinch