我怎样才能生成一个框形阴影而不是投影?Qt/c++ 6.4.1

8dtrkrch  于 2023-01-22  发布在  其他
关注(0)|答案(1)|浏览(124)

我试图创建一个框阴影效果为我的自定义小部件,但我找不到一种方法来做到这一点!
使用QGraphicsDropShadowEffect类生成一个阴影,它是小部件本身形状的副本,并将该副本放在小部件后面。因此,当我将小部件的不透明度设置为50%时,阴影会穿透小部件,我想实现的是更像Web CSS样式中呈现的框影效果,例如:

生成的css:

https://i.ibb.co/mG1XXG2/box-shadow-qt-ask1.png

生成的QGraphicsDropShadowEffect:

https://i.ibb.co/y680RKx/box-shadow-qt-ask2.png
正如你所看到的,我的两个元素都有一个阴影,不透明度为50%,css生成的阴影在半透明的div元素中不可见,但是QGraphicsDropShadowEffect生成的阴影在半透明的小部件中可以看到,有什么方法可以实现创建一个自定义的阴影,行为类似于css框阴影,但在我的Qt/c++小部件上?
对不起,如果我不够清楚,我不是一个Maven说英语。谢谢你的耐心。

tp5buhyn

tp5buhyn1#

一个小窍门是把你的对象+投影组合成一个单独的项目。当你让整个对象不可见的时候,你用一个虚拟的OpacityMask复制整个项目。然后,你把不透明度应用到OpacityMask上。
例如:

import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects

Page {
    background: Rectangle { color: "#ccc" }
    Frame {
        id: butterflyWithBoxShadow
        anchors.centerIn: parent
        visible: false
        padding: 15
        background: Item {
            Rectangle {
                anchors.fill: parent
                anchors.leftMargin: butterflyWithBoxShadow.padding * 2
                anchors.topMargin: butterflyWithBoxShadow.padding * 2
                color: "grey"
                opacity: 0.5
            }
        }
        Frame {
            id: frame
            padding: 1
            background: Rectangle {
                border.color: "blue"
                border.width: 1
                color: "#ffe"
            }            
            Image {
                id: butterfly
                fillMode: Image.PreserveAspectFit
                source: "https://www.arcgis.com/sharing/rest/content/items/185841a46dd1440d87e6fbf464af7849/data"
                smooth: true
            }
        }
    }
    OpacityMask {
        anchors.fill: butterflyWithBoxShadow
        source: butterflyWithBoxShadow
        invert: true
        opacity: slider.value
    }
    Frame {
        anchors.horizontalCenter: parent.horizontalCenter
        y: parent.height * 8 / 10
        background: Rectangle { }
        Slider {
            id: slider
            from: 0
            to: 1
            value: 0.8
        }
    }
}

你可以Try it Online!

相关问题