Zooming image to full screen

Deqing

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

krishkn

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]

Deqing

That works, thanks.

Two further issues about this.

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.
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.

krishkn

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.

Kalvin

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

}
}
}

Update: Forum Guidelines & Code of Conduct

Zooming image to full screen