[Solved] Restrict Image to rectangle when Zoomed in



  • 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


  • Moderators

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



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


  • hi p3c0,
    do u have any other solution ?

    Thanks


  • Moderators

    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.



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

    thanks


  • Moderators



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

    Thanks.


Log in to reply
 

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