qml中倒影的实现

最新推荐文章于 2023-04-22 15:58:19 发布

chizi6067

最新推荐文章于 2023-04-22 15:58:19 发布

阅读量240

点赞数

原文链接：https://my.oschina.net/urlove/blog/3078820

版权

本文介绍了一个使用Qt Quick 2.0和Qt Quick Controls 1.4创建的图形用户界面示例。该界面包含一个渐变背景、图片展示、带有自定义效果的按钮以及一个红色矩形元素。此外，还使用了ShaderEffect为图片添加了特殊的视觉效果。

摘要由CSDN通过智能技术生成

import QtQuick 2.0
import QtQuick.Controls 1.4

Rectangle {
    id: window

    width: 600
    height: 500

    gradient: Gradient {
        GradientStop { position: 0; color: "lightsteelblue" }
        GradientStop { position: 1; color: "black" }
    }

    Image {
        id: img
        width: 300
        height: 170
        source: "qrc:/src/pic/3.jpeg"
    }

    Button{
        id:btn
        anchors.left: img.right
        width: 100
        height: 60
        layer.enabled: true
        layer.effect: Component{
            Rectangle{
                color: "green"
                Text {
                    anchors.centerIn: parent
                    text: qsTr("Button")
                }
            }

        }
    }

    Rectangle{
        id:rect
        color: "red"
        anchors.left: btn.right
        width: 100
        height: 60
    }

    ShaderEffect {
        id:efft
        width: img.width
        height: img.height
        x:img.x
        y:img.y+img.height+2
        property variant source: img

        fragmentShader: "
            varying highp vec2 qt_TexCoord0;
            uniform lowp sampler2D source;
             void main() {

                lowp vec2 tc = qt_TexCoord0 * vec2(1, -1) + vec2(0, 1);
                lowp vec4 col =  texture2D(source, tc);
                gl_FragColor = col * (1.0 - qt_TexCoord0.y) * 0.5;
            }"
    }
}

转载于:https://my.oschina.net/urlove/blog/3078820