Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [Solved] Restrict Image to rectangle when Zoomed in
Forum Updated to NodeBB v4.3 + New Features

[Solved] Restrict Image to rectangle when Zoomed in

Scheduled Pinned Locked Moved QML and Qt Quick
8 Posts 2 Posters 1.8k Views 1 Watching
  • 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.
  • B Offline
    B Offline
    beemaneni
    wrote on last edited by
    #1

    Hi
    I have to objects in my page..1.Rectangle 2. ListView. I have placed image in the recatngle and listview is placed below the rectangle.Here when an image is zoomed in the image gets spilled out of rectangle and looks awkward and parts of images are visible under listview also..What i need is,image should be within the rectangle boundaries when zoomed or under the list view it shud nt be visible wen zoomed.
    Please suggest me some solutions
    Here is my sample code...

    @ Rectangle {
    id: imagerect
    width: parent.width
    height: parent.height
    border.color: "blue"
    Image {
    id: image
    anchors.centerIn: parent
    source: root.sepImage
    antialiasing: true
    scale: 0.5
    fillMode: Image.PreserveAspectFit
    }
    }
    PinchArea {
    id: pincharea
    anchors.fill: parent
    pinch.target: imagerect
    pinch.minimumScale: 0.5
    pinch.maximumScale: 10

        MouseArea {
            id: dragArea
            hoverEnabled: true
            anchors.fill: parent
            drag.target: imagerect
        }
    }
    
    ListView {
        id: listView
        anchors { left: parent.left; top: imagerect.bottom; right: parent.right; bottom: parent.bottom;bottomMargin: root.height -imagerect.height-200 }
        spacing: 2
        orientation: ListView.Horizontal
        model: 10
        z: 1
    

    }@
    Thanks in Advance

    Bala B
    Infinite Computer systems
    Chennai

    1 Reply Last reply
    0
    • p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

      Hi,

      What if you bind the scale of the Rectangle to the Image ?
      @
      Image {
      id: image
      anchors.centerIn: parent
      source: root.sepImage
      antialiasing: true
      scale: imagerect.scale
      fillMode: Image.PreserveAspectFit
      }
      @

      157

      1 Reply Last reply
      0
      • B Offline
        B Offline
        beemaneni
        wrote on last edited by
        #3

        hi doing that will increase the rectangle borders also right...so i do not want to zoom rectangle also..always rectangle should be visible on screen and the image zoomed out of rectangle should not be visible.. and in the above code little changes are done as per my requirement ..ie.target is image

        @
        PinchArea {
        id: pincharea
        anchors.fill: parent
        pinch.target: imagerect
        pinch.minimumScale: 0.5
        pinch.maximumScale: 10

            MouseArea {
                id: dragArea
                hoverEnabled: true
                anchors.fill: parent
                drag.target: imagerect
            }
        }@
        

        Bala B
        Infinite Computer systems
        Chennai

        1 Reply Last reply
        0
        • B Offline
          B Offline
          beemaneni
          wrote on last edited by
          #4

          hi p3c0,
          do u have any other solution ?

          Thanks

          Bala B
          Infinite Computer systems
          Chennai

          1 Reply Last reply
          0
          • p3c0P Offline
            p3c0P Offline
            p3c0
            Moderators
            wrote on last edited by
            #5

            Is it that you want to Zoom the image inside the Rectangle and want it to be contained in it ?

            I think then "Flickable":http://qt-project.org/doc/qt-5/qml-qtquick-http://qt-project.org/doc/qt-5/qml-qtquick-flickable.html.html should do the trick. Try the example shown there.

            157

            1 Reply Last reply
            0
            • B Offline
              B Offline
              beemaneni
              wrote on last edited by
              #6

              yup...the image i zoomed is to be inside the rectangle only...The link u gave is broken..

              thanks

              Bala B
              Infinite Computer systems
              Chennai

              1 Reply Last reply
              0
              • p3c0P Offline
                p3c0P Offline
                p3c0
                Moderators
                wrote on last edited by
                #7

                Sorry, check "Flickable":http://qt-project.org/doc/qt-5/qml-qtquick-flickable.html#details

                157

                1 Reply Last reply
                0
                • B Offline
                  B Offline
                  beemaneni
                  wrote on last edited by
                  #8

                  Hi adding *clip: true *does solve my problem in above code.
                  Thanks for ur assistance p3c0

                  Thanks.

                  Bala B
                  Infinite Computer systems
                  Chennai

                  1 Reply Last reply
                  0

                  • Login

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Categories
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Groups
                  • Search
                  • Get Qt Extensions
                  • Unsolved