Question

我正在尝试在我的Rectangle中应用一个DropShadow效果。完成之后，内部的文本和图标变得越来越模糊。知道如何解决吗？

import VPlayApps 1.0
import QtQuick 2.9
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.2

App {    
    Rectangle {
        id: buttonOverview
        width: app.width * 0.12
        height: buttonQuit.width
        color: "#439fd0"
        radius: 3
        anchors.left: parent.left
        anchors.leftMargin: app.width * 0.034
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#48a4d5"
            }

            GradientStop {
                position: 1
                color: "#01618c"
            }
        }
        AppImage {
            id: appImage
            width: 44
            height: 43
            anchors.bottom: spacerProjectOverview.top
            anchors.horizontalCenter: parent.horizontalCenter
            source: "../../../WinCan/Icons/projectOverview.png"
            fillMode: Image.PreserveAspectFit
        }

        Text {
            id: textOverview
            color: "#ffffff"
            text: qsTr("Project\nOverview")
            anchors.topMargin: 5
            anchors.top: spacerProjectOverview.bottom
            anchors.bottomMargin: parent.height * 0.18
            anchors.bottom: parent.bottom
            font.bold: true
            horizontalAlignment: Text.AlignHCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 14
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                buttonQuit.opacity = 0
            }
        }

        Rectangle {
            id: spacerProjectOverview
            width: parent.width
            height: parent.height * 0.05
            color: "transparent"
            anchors.verticalCenter: parent.verticalCenter
        }


        anchors.verticalCenter: parent.verticalCenter
    }

    DropShadow {
    anchors.fill: buttonOverview
    horizontalOffset: 1
    verticalOffset: 6
    radius: 5
    samples: 5
    source: buttonOverview
    color: "black"

    }
}

期望的：获得阴影以及美观的文本和图标实际：出现阴影，但文字和图标模糊

Answer 1

您的DropShadow将被应用到buttonOverview组件区域，并且如定义在buttonOverview下方，它将放置在其顶部。如果我了解您的要求，则应将DropShadow移动到buttonOverview Rectangle组件上方。

QML-DropShadow模糊文本和img

1 个答案: