[Solved] Restrict Image to rectangle when Zoomed in

beemaneni

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

p3c0

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

beemaneni

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

beemaneni

hi p3c0,
do u have any other solution ?

Thanks

p3c0

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.

beemaneni

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

thanks

p3c0

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

beemaneni

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

Thanks.