代码:
photoroom.qml
import QtQuick 1.0
import Qt3D 1.0
Viewport {
id: viewport
width: 800; height: 480
picking: true
//navigation: false //不禁用导航功能
//showPicking: true //禁用纹理??待定
property real eye_y: 4
property real eye_z: 12
camera: Camera {
id: main_camera
eye: Qt.vector3d(0, eye_y, eye_z)
center: Qt.vector3d(0, 0, -2.5)
}
ListModel {
id: imagesModel
ListElement { image: "textures/place.jpg"; }
ListElement { image: "textures/basket.jpg"; }
ListElement { image: "textures/woman.jpg"; }
ListElement { image: "textures/niagara_falls.jpg"; }
ListElement { image: "textures/qtlogo.png"; color: "#006090" }
}
Component {
id: paneComponent
PhotoPane {
layer: index
image: model.image
enabled: index != -1 //允许在模型中删除元素
color: (model.color === undefined) ? "#ffffff" : model.color
}
}
//创建两个图片组
Item3D {
x: -2.1
Repeater {
delegate: paneComponent
model: imagesModel
}
}
Item3D {
x: 2.1
Repeater {
delegate: paneComponent
model: imagesModel
}
}
states: [
State {
name: "show_photo"
PropertyChanges { target: main_camera; eye.y: 0 }
PropertyChanges { target: main_camera; eye.x: 0 }
PropertyChanges { target: main_camera; eye.z: eye_z }
//如果是视图有旋转角度,更新相机到以y轴为中心,
//如果是(1, 0, 0),图片逆时针旋转90度
PropertyChanges { target: main_camera; upVector: Qt.vector3d(0, 1, 0)}
},
State {
name: "show_group";
PropertyChanges {target: main_camera; eye.y: eye_y }
}
]
//变换效果:相机视角y改变时延时700
transitions: [
Transition {
from: "*"; to: "*"
NumberAnimation {
targets: main_camera; properties: "eye.y,eye.x,eye.z";
easing.type: "OutBounce"; duration: 700 }
}
]
}
PhotoPane.qmlPhotoPane.qml
import QtQuick 1.0
import Qt3D 1.0
Item3D {
id: photo
property real layer
property variant image
property bool bounce: false
property string color: "#ffffff"
scale:1
mesh: Mesh { source: "photopane.obj" }
effect: Effect { decal: true; texture: image; color: photo.color }
position: Qt.vector3d(0, 0, -layer)
//打击和鼠标悬浮状态变化
onClicked: {
if (photo.state === "pulled_out") photo.state = "returned";
else photo.state = "pulled_out";
}
onHoverEnter: { photo.state = "pop_up" }
onHoverLeave: { photo.state = "returned" }
states: [
State {
name: "pop_up" //鼠标悬停-上升一个单位
PropertyChanges { target: photo; y: 1.0 }
},
State {
name: "pulled_out" //弹出状态-图片放大1.75倍,移动最前图层
PropertyChanges { target: photo; x: -parent.x } //"全屏"效果
PropertyChanges { target: photo; scale: 1.75 }
PropertyChanges { target: photo; z: 2 }
PropertyChanges { target: viewport;state: "show_photo" } //改变viewport页面状态
},
State {
name: "returned"
PropertyChanges { target: photo; x: 0 }
PropertyChanges { target: photo; scale: 1 }
PropertyChanges { target: photo;z: -layer }
PropertyChanges { target: viewport; state: "show_group" }
}
]
transitions: [
Transition {
from: "*" ; to: "*"
NumberAnimation {
targets: photo; properties: "x,scale,z,y";
easing.type: "OutBounce"; duration: 700 }
}
]
}