82 lines
2.7 KiB
QML
82 lines
2.7 KiB
QML
import QtQuick 2.0
|
|
|
|
Rectangle {
|
|
width: 320
|
|
height: 480
|
|
Column {
|
|
id: foo
|
|
x: -width * (scale - 1) * (10/9) * (mouseArea.mouseX / width - 0.5)
|
|
y: -height * (scale - 1) * (10/9) * (mouseArea.mouseY / height - 0.5)
|
|
states: [
|
|
State {
|
|
name: ""
|
|
PropertyChanges {
|
|
target: foo
|
|
scale: 1
|
|
}
|
|
},
|
|
State {
|
|
name: "zoomed"
|
|
when: mouseArea.pressed
|
|
PropertyChanges {
|
|
target: foo
|
|
scale: 10
|
|
}
|
|
}
|
|
]
|
|
Behavior on scale {
|
|
NumberAnimation { duration: 300; easing.type: Easing.InOutSine }
|
|
}
|
|
|
|
Repeater {
|
|
model: 3
|
|
Row {
|
|
id: local
|
|
property int _index: index
|
|
Repeater {
|
|
model: 2
|
|
Item {
|
|
width: 80
|
|
height: 160
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
anchors.margins: 10
|
|
radius: index * 20
|
|
border.pixelAligned: local._index == 1
|
|
border.width: local._index == 0 ? 0 : 0.5
|
|
opacity: 0.5
|
|
color: "steelBlue"
|
|
}
|
|
}
|
|
}
|
|
Repeater {
|
|
model: 2
|
|
Item {
|
|
width: 80
|
|
height: 160
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
anchors.margins: 10
|
|
radius: index * 20
|
|
border.pixelAligned: local._index == 1
|
|
border.width: local._index == 0 ? 0 : 0.5
|
|
opacity: 0.5
|
|
gradient: Gradient {
|
|
GradientStop { position: 0.05; color: "lightsteelblue" }
|
|
GradientStop { position: 0.1; color: "lightskyblue" }
|
|
GradientStop { position: 0.5; color: "skyblue" }
|
|
GradientStop { position: 0.9; color: "deepskyblue" }
|
|
GradientStop { position: 0.95; color: "dodgerblue" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
MouseArea {
|
|
id: mouseArea
|
|
anchors.fill: parent
|
|
}
|
|
}
|