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.



  • I have made the zoom In option. I need to ZOOM IN by double click the image. I had done by keeping an separate button.
    so any suggestion for this below code means it will be help full for me ...

    Rectangle{
    id: page
    width: 960; height: 720; color: "#201F25"

    Rectangle {
    color: "blue"; x: 56; y: 47
    width: parent.width/3; height: parent.height/3
    Rectangle {
    id: banner
    width: parent.width/5
    height: parent.height/5
    anchors.left: parent.left
    anchors.leftMargin: 213
    x: 200; y: 96
    Image{
    id: thumbnail
    x: 0
    y: 1
    //source:"./58443ae7a6515b1e0ad75b72.png"
    source:"./albumart1.jpg"
    width: parent.width; height: parent.height
    }

    Rectangle {
    id: clickContainer
    color: "transparent"; border.color: "#170303"; anchors.rightMargin: -4; anchors.bottomMargin: -1; anchors.leftMargin: 4; anchors.topMargin: 1; opacity: 0.5
    anchors.fill: parent
    visible: true
    MouseArea {
    anchors.rightMargin: 0
    anchors.bottomMargin: 0
    anchors.leftMargin: 0
    anchors.topMargin: 0
    anchors.fill: parent
    onClicked: {
    console.log("entered")
    rectangle1.visible = true

    if( clickContainer.visible == "false")
    {
    clickContainer.visible = false

    console.log("pressed")
    

    }
    else
    {
    clickContainer.visible = false
    console.log("released")
    }
    }

    states: [
    State {
    name: "enlarge"; when: !clickContainer.visible
    PropertyChanges {
    target: banner
    width: 600//page.width;
    height: 600// page.width
    x: page.x - 500; y: page.y - 10

    }
    }
    ]

    transitions: [
    Transition {
    from: 'ingrid'; to: 'enlarge'
    SequentialAnimation {
    NumberAnimation { properties: "x,y,width,height"; duration: 100; easing.type: 'OutQuart'}
    }
    }
    ]
    }
    }
    }

    Rectangle {
    id: rectangle1
    x: 8
    y: 172
    width: 53
    height: 31
    color: "#ffffff"
    visible: false

    Text {
        id: text1
        x: 0
        y: 6
        color: "#0d0000"
        text: "ZOOM IN"
        font.bold: true
        font.pixelSize: 12
    }
    

    }
    }

    MouseArea {
    id: mouseArea1
    x: 56
    y: 206
    width: 66
    height: 57
    onClicked: {
    console.log("enteredeee")
    if(clickContainer.visible == false)
    {
    clickContainer.visible = true
    rectangle1.visible = false
    console.log("released")
    }

    }
    }
    }


Log in to reply
 

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