QML PinchArea (image zooming)
asked 2015-11-19 15:11:22 +0200
Hello, I already wrote on StackOverflow and QT forum, but no one seem to know answer.
How can I have an image zoomable by two fingers gesture like in Jolla gallery?
This is what I have so far:
import QtQuick 2.0
import Sailfish.Silica 1.0
Page {
property string jsondata: "" // drží v sobě json string z webu
property variant json_o: "" // placeholder pro json object
property string pic_id: ""
id: page
function load() { // funkce asynchronně vezme data z webu a přiřadí je
var xhr = new XMLHttpRequest();
xhr.open("GET","http://cah.chrastecky.cz/"+pic_id,true);
xhr.onreadystatechange = function() {
if(xhr.readyState == xhr.DONE) {
jsondata = xhr.responseText;
}
}
xhr.send();
checktimer.running = true;
}
SilicaFlickable {
anchors.fill: parent
PullDownMenu {
MenuItem {
enabled: json_o.next?true:false
text: qsTr("Next")
onClicked: {
pic_id = json_o.next;
load();
}
}
}
PushUpMenu {
MenuItem {
enabled: json_o.prev?true:false
text: qsTr("Previous")
onClicked: {
pic_id = json_o.prev;
load();
}
}
}
contentHeight: column.height
Column {
id: column
width: page.width
spacing: Theme.paddingLarge
PageHeader {
title: qsTr("Cyanide & Happiness")
}
Label {
id: loadinglabel
text: "loading"
}
Image {
id: mainimage
//visible: false
opacity: 0;
source: ""
fillMode: Image.PreserveAspectFit
width: column.width;
z: 10
PinchArea {
id: imagepinch
width: mainimage.width
height: mainimage.height
pinch.target: mainimage
pinch.minimumScale: 1.0
pinch.maximumScale: 5.0
pinch.dragAxis: Pinch.XAndYAxis
anchors.centerIn: parent
z: 20
onPinchStarted: {
console.log("started");
}
onPinchUpdated: {
console.log(pinch);
}
}
}
Timer {
id: checktimer
interval: 1000
running: false
repeat: true
onTriggered: {
if(jsondata) {
checktimer.running = false;
loadinglabel.visible = false;
json_o = JSON.parse(jsondata);
console.log(jsondata);
jsondata = "";
mainimage.source = json_o.src;
//mainimage.visible = true;
mainimage.opacity = 1;
imagepinch.height = mainimage.height;
var koef = mainimage.width / json_o.width;
var h = koef * json_o.height;
mainimage.height = h;
imagepinch.height = h;
}
}
}
Component.onCompleted: {
load();
}
}
}
}
The image source is loaded from json in Timer. When I try to zoom it does not even fire the events.
Can anybody help?
