qml实现倒影效果
本文最后更新于 974 天前,其中的信息可能已经有所发展或是发生改变。

在网上查找qml中实现倒影效果的相关内容时,国内网站有关的内容都是使用ShaderEffect实现的,且代码都是以图片(Image)为例。
GPbeta的帮助下,找到了另一种使用OpacityMask实现倒影效果的方式,对控件和图片都有效果,在此记录一下。效果图如下。

代码实现

import QtQuick 2.4
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Rectangle {
    id: main_container
    width: 390
    height: 360

    property int offset: 0

    Rectangle {
        //控件本体
        id: content
        color: "#8e44ad"
        width: 140
        height: 140
        anchors.top: parent.top
        anchors.topMargin: 20
        anchors.left: parent.left
        anchors.leftMargin: 50
    }

    OpacityMask {
        //控件阴影
        width: content.width
        height: content.height
        //阴影定位
        anchors.top: content.bottom
        anchors.topMargin: content.height + offset
        anchors.left: content.left

        source: content
        maskSource: Rectangle {
            width: content.width
            height: content.height
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) }
                GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.9) }
            }
        }

        transform: Scale { yScale: -1}
    }

    Image {
        //图片本体
        id: img
        width: 140
        height: 140
        source: "test.png"
        anchors.top: parent.top
        anchors.topMargin: 20
        anchors.left: content.right
        anchors.leftMargin: 20
    }

    OpacityMask {
        //图片阴影
        width: img.width
        height: img.height
        //阴影定位
        anchors.top: img.bottom
        anchors.topMargin: img.height + offset
        anchors.left: img.left

        source: img
        maskSource: Rectangle {
            width: img.width
            height: img.height
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) }
                GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.9) }
            }
        }

        transform: Scale { yScale: -1}
    }
}


  • 本文作者: Mashiro_Sorata

  • 版权声明: 本站所有文章除特别声明外,均采用 (CC)BY-NC-SA 许可协议。转载请注明出处!


暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇