Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Zooming image to full screen

    QML and Qt Quick
    3
    5
    5474
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      Deqing last edited by

      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;
      }
      }
      }
      }
      }
      }
      @

      1 Reply Last reply Reply Quote 0
      • K
        krishkn last edited by

        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]

        Regards,
        Krishkn

        1 Reply Last reply Reply Quote 0
        • D
          Deqing last edited by

          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 Reply Last reply Reply Quote 0
          • K
            krishkn last edited by

            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.

            Regards,
            Krishkn

            1 Reply Last reply Reply Quote 0
            • K
              Kalvin last edited by

              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")
              }

              }
              }
              }

              1 Reply Last reply Reply Quote 0
              • First post
                Last post