Zooming image to full screen



  • I'm trying to enable zooming an image to full-screen when user clicks on it.

    My code like following, but it is not working properly. I think the problem is the image is inside a nested item so it failed to find correct x,y when enlarging.

    Any idea how to make it smoothly zooming to fill out the whole page?

    @
    import Qt 4.7
    Rectangle{
    id: page
    width: 960; height: 720; color: "#201F25"
    Rectangle {
    color: "blue"; x: 50; y: 50
    width: parent.width/3; height: parent.height/3
    Rectangle {
    id: banner
    width: parent.width/5
    height: parent.height/5
    anchors.horizontalCenter: parent.horizontalCenter
    x: 150; y: 100
    Image{
    id: thumbnail
    source:"images/thumbnail.png"
    width: parent.width; height: parent.height
    }
    states: [
    State {
    name: "enlarge"; when: !clickContainer.visible
    PropertyChanges {
    target: banner
    width: page.width; height: page.width
    x: page.x; y: page.y
    }
    }
    ]
    transitions: [
    Transition {
    from: '*'; to: 'enlarge'
    SequentialAnimation {
    NumberAnimation { properties: "x,y,width,height"; duration: 400; easing.type: Easing.OutQuad }
    }
    }
    ]
    Rectangle {
    id: clickContainer
    color: "green"; opacity: 0.5
    anchors.fill: parent
    visible: true
    MouseArea {
    anchors.fill: parent
    onClicked: {
    clickContainer.visible = false;
    }
    }
    }
    }
    }
    }
    @



  • remove anchors.horizontalCenter: parent.horizontalCenter (as it always tries to take parent's center as images centre even while animating width and height ;) ) and in order to fit to the id : page, u need to consider ur inner rectangle's x and y as well.. I mean in order to align to the page.x and page.y do this

    @
    PropertyChanges {
    target: banner
    width: page.width; height: page.width
    x: page.x - 50; y: page.y - 50 (inner rect's x and y)
    }
    @

    Thanks
    Krishkn

    [EDIT: added @-tags for code formatting, Volker]



  • That works, thanks.

    Two further issues about this.

    1. I'd like to do something after zooming finish. e.g. model.openURL("...");
      I can do it by adding code to onClicked(), but the animation of zooming can't be seen any more, as the url is opened immediately.

    2. There should be some way to turn the image back to its original size. Otherwise if user reopen this page they will see the full screen image again.



    1. you could add a scriptAction(in which u can call a function which does the required operation) exactly after NumberAnimation{}

    2)After doing the model.openURL,reset the images size back to its original.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.