For some applications, we want to use gestures to do some actions. Such as using gestures to zoom in or rotate an image. It’s also a good way for PDF readers to enlarge their fonts. In this article, we will introduce how to use gestures.
\
In QML, there is one element, PinchArea. There is also some introduction to “Pinch scaling and rotation for Qt Quick event handling” in this article. Instead of going over the details here, we’ll just post our routines:
\
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; The 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 } } } } } } }Copy the code\
Running our application, you can see the following screen:
\
The entire project source at: github.com/liu-xiao-gu…
\