How to handle pinch gestures using PinchArea item

This article provides a code snippet showing how to use a PinchArea to zoom in and zoom out the image, and how to drag & drop the image.

Article Metadata

---

Code Example

Source file: Media:Pincharea.zip

---

Tested with

SDK: Nokia Qt SDK 1.1

Devices(s): Nokia E7, Nokia N8

---

Compatibility

Platform(s): Symbian, MeeGo

Device(s): All Qt 4.7

---

Article

Keywords: QML PinchArea Element,QML PinchEvent Element

Created: kkrish (06 Dec 2011)

Last edited: hamishwillee (13 Jun 2012)

Introduction

• To move image on the screen just tap on the image and move your finger.
• Before zoom in-zoom out you need to do a long tap on image to enable the pinch area. you can also change this functionality on some other event as well.

Here you can see the code in action.

Source code

import QtQuick 1.1
Rectangle {
    height: 640
    width: 360
    id: root
      Rectangle {
        property bool isClicked: false
        property int count : 0
        id: imageArea
        width: 200
        height: 200
        border.width: 5
        border.color: "red"
        x: 100
        y: 100
        Image {
            id: image
            source: "qrc:/qml/imagehandling/images/1.jpg"
            anchors.fill: parent
            smooth: true
            asynchronous: true
        }
        MouseArea {
            anchors.fill: parent
            property real old_x : 0
            property real old_y : 0
 
            onPressed:{
                var tmp = mapToItem(root, mouse.x, mouse.y);
                old_x = tmp.x;
                old_y = tmp.y;
            }
 
            onPositionChanged: {
                var tmp = mapToItem(root, mouse.x, mouse.y);
                var delta_x = tmp.x - old_x;
                var delta_y = tmp.y - old_y;
                imageArea.x += delta_x;
                imageArea.y += delta_y;
                old_x = tmp.x;
                old_y = tmp.y;
            }
            onPressAndHold: {
                pincharea.enabled = true
            }
        }
 
        PinchArea {
            id: pincharea
            enabled: false
            anchors.fill: parent
            pinch.target: imageArea
            property double __oldZoom
 
            onPinchStarted: {
                __oldZoom =  pinch.scale
            }
 
            onPinchUpdated: {
                imageArea.count = pinch.scale
                if(__oldZoom  < pinch.scale){
                    imageArea.height = imageArea.height + (imageArea.count * 1)
                    imageArea.width = imageArea.width + (imageArea.count * 1)
                }
                else{
                    imageArea.height = imageArea.height - (imageArea.count * 5)
                    imageArea.width = imageArea.width - (imageArea.count * 5)
                }
            }
 
            onPinchFinished: {
                imageArea.count = pinch.scale
 
                if(__oldZoom < pinch.scale){
                    imageArea.height = imageArea.height + (imageArea.count * 1)
                    imageArea.width = imageArea.width + (imageArea.count * 1)
                }
                else{
                    imageArea.height = imageArea.height - (imageArea.count * 5)
                    imageArea.width = imageArea.width - (imageArea.count * 5)
                }
                pincharea.enabled = false
            }
        }
    }
}

Source Code (in .zip file)

http://www.developer.nokia.com/Community/Wiki/File:Pincharea.zip

Related links

You can find more details on the below links:

• PinchArea
• Pinch Events