[Qt-qml] Flickable and content size changes

[michael.brasser at nokia.com]

Hi,

It might be worth having a look at the QML flickr demo in Qt (demos/declarative/flickr) -- it allows zooming and flicking, and seems to have solved this issue.

Regards,
Michael

On 18/11/2010, at 2:47 AM, ext simon.turvey at nokia.com<mailto:simon.turvey at nokia.com> wrote:

Hi all,

I have the code below that doesn’t quite behave the way I would like! It implements basic flicking around a loaded image and has a couple of rudimentary buttons for zooming in and out of that image. I’ve managed to get the Flickable to understand that the zoomed image is now bigger than it was previously by scaling the contentHeight and contentWidth. The problem is that the contentX  and contentY do not change and so the viewport still thinks it’s where it was before.

Can anyone recommend a way round this?

Rectangle {
    id: birdsEyeViewer
    anchors.fill: parent
    Flickable {
        id: birdsEyeViewerFlickable
        anchors.fill: parent
        contentWidth: image.width * image.scale
        contentHeight: image.height * image.scale
    }
    Image {
        id: image
        source: "qrc:/pics/image_small.jpg"
        fillMode: Image.PreserveAspectCrop
        anchors.centerIn: parent
    }
    SmoothedAnimation {
        id: zoomInAnimation
        target: image
        property: "scale"
        to: 5
        velocity: 1
        running: zoomInButton.pressed
    }
    SmoothedAnimation {
        id: zoomOutAnimation
        target: image
        property: "scale"
        to:1
        velocity: 1
        running: zoomOutButton.pressed
    }
    Rectangle {
        id: zoomInButton
        property alias pressed: zoomInMouseArea.pressed
        height: 50
        width: 50
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.top: parent.top
        z: 100
        color: "black"
        MouseArea {
            id: zoomInMouseArea
            anchors.fill: parent
        }
    }
    Rectangle {
        id: zoomOutButton
        property alias pressed: zoomOutMouseArea.pressed
        height: 50
        width: 50
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.bottom: parent.bottom
        z: 100
        color: "red"
        MouseArea {
            id: zoomOutMouseArea
            anchors.fill: parent
        }
    }
}


Regards,

Simon


<ATT00001..txt>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20101118/093f4d87/attachment.html