QML - DropShadow размытие текста & img - PullRequest
Новая
       65

QML - DropShadow размытие текста & img

0 голосов
/ 21 января 2019

Я пытаюсь применить эффект 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"

    }
}

Ожидаемое: получение тени и красивого текста и значков Фактически: получается тень, но текст и значки размыты

1 Ответ

0 голосов
/ 22 января 2019

Ваша DropShadow применяется к области компонентов buttonOverview, и, как она определена под buttonOverview, она будет расположена поверх нее. Если я понимаю ваши требования, вам следует переместить DropShadow над компонентом buttonOverview Rectangle.

...