Qt-Quick-例子-photoroom

最新推荐文章于 2023-07-24 15:52:14 发布

转载最新推荐文章于 2023-07-24 15:52:14 发布 · 1.1k 阅读

QtQuick3D 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个基于Qt Quick和Qt 3D的照片墙应用程序，该应用通过3D视图展示图片，并支持交互操作如缩放和平移。文章详细描述了如何使用QML语言创建3D场景，包括设置相机参数、加载图片资源以及实现图片的动态效果。

代码：

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