Active Topics

 


Reply
Thread Tools
Markkyboy's Avatar
Posts: 433 | Thanked: 727 times | Joined on Oct 2012 @ Costa Blanca, Espaņa
#1
EDIT: - I've answered my own question. I still cannot get onDoubleClicked to work, so for now, I have settled with onClicked instead.

Code:
        onHeightChanged: if (imagePreview.status === Image.Ready) imagePreview.fitToScreen();

        MouseArea {
            anchors.fill: imageContainer
            onClicked: imagePreview.fitToScreen()
        }

        PageHeader { title: "Network map" }
Hi all,

I'd like to implement 'onDoubleClicked' to my page. My page shows a Map, which can be pinched to a min/max level.
Currently, the user has to pinch the image back to fit the page before he can swipe back to the previous page; it would be nice just to double click the map and then swipe back!

I've tried dozens of different ways to achieve this (too many to list) but I'm not having much luck, clearly I'm missing a trick somewhere along the line. It seems as if 'onDoubleClicked' doesn't always work, although I have played with one file where double clicked does work, but I was unable to recreate the same in my file.

Here's my page;

Code:
import QtQuick 2.0
import Sailfish.Silica 1.0

Page {

    Rectangle { anchors.fill: parent; color: 'black' }

    SilicaFlickable {
        id: imageFlickable
        anchors.fill: parent
        contentWidth: imageContainer.width; contentHeight: imageContainer.height
        onHeightChanged: if (imagePreview.status === Image.Ready) imagePreview.fitToScreen();

        PageHeader { title: "Network map" }

        Item {
            id: imageContainer
            width: Math.max(imagePreview.width * imagePreview.scale, imageFlickable.width)
            height: Math.max(imagePreview.height * imagePreview.scale, imageFlickable.height)

            Image {
                id: imagePreview

                property real prevScale

                function fitToScreen() {
                    scale = Math.min(imageFlickable.width / width, imageFlickable.height / height, 1)
                    pinchArea.minScale = scale
                    prevScale = scale
                }
                anchors.centerIn: parent
                fillMode: Image.PreserveAspectFit
                source: "../images/networkmap.png"
                sourceSize.height: 3489;
                smooth: !imageFlickable.moving

                onStatusChanged: {
                    if (status == Image.Ready) {
                        fitToScreen()
                        loadedAnimation.start()
                    }
                }
                NumberAnimation {
                    id: loadedAnimation
                    target: imagePreview
                    property: "opacity"
                    duration: 250
                    from: 0; to: 1
                    easing.type: Easing.InOutQuad
                }
                onScaleChanged: {
                    if ((width * scale) > imageFlickable.width) {
                        var xoff = (imageFlickable.width / 2 + imageFlickable.contentX) * scale / prevScale;
                        imageFlickable.contentX = xoff - imageFlickable.width / 2
                    }
                    if ((height * scale) > imageFlickable.height) {
                        var yoff = (imageFlickable.height / 2 + imageFlickable.contentY) * scale / prevScale;
                        imageFlickable.contentY = yoff - imageFlickable.height / 2
                    }
                    prevScale = scale
                }
            }
        }
        PinchArea {
            id: pinchArea

            property real minScale: 1.0
            property real maxScale: 3.0

            anchors.fill: parent
            enabled: imagePreview.status === Image.Ready
            pinch.target: imagePreview
            pinch.minimumScale: minScale * 0.9
            pinch.maximumScale: maxScale * 2.0

            onPinchFinished: {
                imageFlickable.returnToBounds()
                if (imagePreview.scale < pinchArea.minScale) {
                    bounceBackAnimation.to = pinchArea.minScale
                    bounceBackAnimation.start()
                }
                else if (imagePreview.scale > pinchArea.maxScale) {
                    bounceBackAnimation.to = pinchArea.maxScale
                    bounceBackAnimation.start()
                }
            }
            NumberAnimation {
                id: bounceBackAnimation
                target: imagePreview
                duration: 250
                property: "scale"
                from: imagePreview.scale
            }
            MouseArea {
                id: pageDimmer
                anchors.fill: parent
                onPressAndHold: {
                    if      (imagePreview.opacity==1.00) imagePreview.opacity=0.75
                    else if (imagePreview.opacity==0.75) imagePreview.opacity=0.50
                    else if (imagePreview.opacity==0.50) imagePreview.opacity=1.00
                }
            }
        }

        VerticalScrollDecorator { color: 'black'; width: 6 }

        HorizontalScrollDecorator { color: 'black'; height: 6 }
    }
}
All input gratefully received

thanks,
__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..

Last edited by Markkyboy; 2017-09-20 at 15:46.
 

The Following 2 Users Say Thank You to Markkyboy For This Useful Post:
Reply

Thread Tools

 
Forum Jump


All times are GMT. The time now is 05:33.