How to handle pinch gestures using PinchArea item

Comments

Chintandave er - Some Suggestions

Hi Krish, Nice Articles but it still become more if you add some screenshot of your code's output. You can embed video also if you want to show some complex functionality that cant be obtain by screenshot. So reader can understand easily.

Thanks.

Chintan Dave.

Chintandave er 20:03, 6 December 2011 (EET)

Kiran10182 - Please update Article metadata - Thanks

Hi Krish,

Thanks for the article. There are items such as sdk, devices(devices tested against), source code(e.g: in a .zip file), etc. in the ArticleMetadata section. Please update those missing information and make the article more furnished. :)

Thanks for your efforts.

Kiran.

kiran10182 22:06, 6 December 2011 (EET)

Chintandave er - Thanks for Demo Video.

Hi Krish, Thanks for adding demo Video.

Nice Article.

Chintan.

Chintandave er 09:11, 7 December 2011 (EET)

Hamishwillee - Yes, this is nice

Hi Krish

I've just restructured to move the demo up top. I think this shows off what your code is trying to do better than having it down the bottom.

Its "convenient" if you can provide a buildable zip of the project. This makes it easier for users to test the files. Its also very useful to update the ArticleMetaData with information about the platforms, devices and sdks you tested with - that allows others to have a starting point if the code doesn't work, and also will help them identify what is relevant should this article last a few years.

Regards

H

hamishwillee 07:16, 8 December 2011 (EET)

Kkrish - Modified as you suggested

Hi Friends,

Thanks for the suggestions. I have added the code and updated meta data also as you have mentioned.

BR,

kkrish

kkrish 07:24, 1 February 2012 (EET)

Log in or Join to leave comments.

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 (30 Jan 2013)

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. The media player is loading...

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