×
Namespaces

Variants
Actions

How to handle pinch gestures using PinchArea item

From Nokia Developer Wiki
Jump to: navigation, search

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
Symbian
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)

Contents

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:

This page was last modified on 30 January 2013, at 07:41.
157 page views in the last 30 days.
×