Ask / Submit
2

QML PinchArea (image zooming)

asked 2015-11-19 15:11:22 +0200

Rikudou_Sennin gravatar image

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?

edit retag flag offensive close delete

2 Answers

Sort by » oldest newest most voted
2

answered 2015-11-19 15:26:07 +0200

coderus gravatar image

sure, in RTFM: http://doc.qt.io/qt-5/qtquick-touchinteraction-pincharea-flickresize-qml.html

edit flag offensive delete publish link more
0

answered 2015-11-19 16:25:59 +0200

BirdZhang gravatar image

Feel free to use https://github.com/0312birdzhang/harbour-one/blob/master/qml/pages/ImagePage.qml

edit flag offensive delete publish link more
Login/Signup to Answer

Question tools

Follow
3 followers

Stats

Asked: 2015-11-19 15:11:22 +0200

Seen: 1,473 times

Last updated: Nov 19 '15