Qt功能优化:Qt 3D画廊
Posted 灵彧universe
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Qt功能优化:Qt 3D画廊相关的知识,希望对你有一定的参考价值。
Qt功能优化:Qt 3D画廊
@TOC
一、效果图
如下图所示:
二、使用步骤
1. .pro部分
TEMPLATE = app
QT += qml quick
CONFIG += c++11
SOURCES += main.cpp
RESOURCES += qml.qrc \\
image.qrc
# Additional import path used to resolve QML modules in Qt Creators code model
QML_IMPORT_PATH =
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =
# The following define makes your compiler emit warnings if you use
# any feature of Qt which as been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS
# You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
# Default rules for deployment.
qnx: target.path = /tmp/$$TARGET/bin
else: unix:!android: target.path = /opt/$$TARGET/bin
!isEmpty(target.path): INSTALLS += target
2. .qml部分
Demo.qml
Rectangle
id:coverflow
property ListModel model
property int itemCount: 5
PathView
id:pathView
model:coverflow.model
delegate: Item
id:delegateItem
width: 530
height: 420
z:PathView.iconZ
scale:PathView.iconScale
Image
id:image
source: url
width: delegateItem.width
height: delegateItem.height
ShaderEffect
anchors.top: image.bottom
width: image.width
height: image.height;
anchors.left: image.left
property variant source: image;
property size sourceSize: Qt.size(0.5 / image.width, 0.5 / image.height);
fragmentShader:
"varying highp vec2 qt_TexCoord0;
uniform lowp sampler2D source;
uniform lowp vec2 sourceSize;
uniform lowp float qt_Opacity;
void main()
lowp vec2 tc = qt_TexCoord0 * vec2(1, -1) + vec2(0, 1);
lowp vec4 col = 0.25 * (texture2D(source, tc + sourceSize) + texture2D(source, tc- sourceSize)
+ texture2D(source, tc + sourceSize * vec2(1, -1))
+ texture2D(source, tc + sourceSize * vec2(-1, 1)));
gl_FragColor = col * qt_Opacity * (1.0 - qt_TexCoord0.y) * 0.2;
"
transform: Rotation
origin.x:image.width/2.0
origin.y:image.height/2.0
axisx:0;y:1;z:0
angle: delegateItem.PathView.iconAngle
path:coverFlowPath
pathItemCount: coverflow.itemCount
anchors.fill: parent
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
Path
id:coverFlowPath
startX: 0
startY: coverflow.height/3
PathAttributename:"iconZ";value: 0
PathAttributename:"iconAngle";value: 70
PathAttributename:"iconScale";value: 0.6
PathLinex:coverflow.width/2;y:coverflow.height/3
PathAttributename:"iconZ";value: 100
PathAttributename:"iconAngle";value: 0
PathAttributename:"iconScale";value: 1.0
PathLinex:coverflow.width;y:coverflow.height/3
PathAttributename:"iconZ";value: 0
PathAttributename:"iconAngle";value: -70
PathAttributename:"iconScale";value: 0.6
PathPercentvalue:1.0
---
main.qml
>代码如下:
```c
import QtQuick 2.8
import QtQuick.Window 2.2
Window
visible: true
width:1800
height: 880
title: qsTr("灵眸")
ListModel
id:model
ListElementurl:"qrc:/image/1.png"
ListElementurl:"qrc:/image/2.png"
ListElementurl:"qrc:/image/3.png"
ListElementurl:"qrc:/image/4.png"
ListElementurl:"qrc:/image/6.png"
ListElementurl:"qrc:/image/7.png"
ListElementurl:"qrc:/image/8.png"
ListElementurl:"qrc:/image/9.png"
ListElementurl:"qrc:/image/10.png"
ListElementurl:"qrc:/image/11.png"
ListElementurl:"qrc:/image/12.png"
ListElementurl:"qrc:/image/13.png"
ListElementurl:"qrc:/image/14.png"
CoverFlow
anchors.fill:parent
model:model
3. .cpp部分
main.cpp
int main(int argc, char *argv[])
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
---
# 总结
如果大家有时间的话,也可以在个人主页中的专栏部分,查看我的**Qt实战专栏**与**Qt界面优化**专栏哦,里面分别存放有Qt相关的实战软件和相对实用的附属功能,大家感兴趣可以看看(๑><๑)
希望能帮助到大家,感谢大家支持~( ̄▽ ̄~)~
以上是关于Qt功能优化:Qt 3D画廊的主要内容,如果未能解决你的问题,请参考以下文章