QML - DropShadow blurring text & img

Question

I'm trying to apply a DropShadow effect into my Rectangle. After I did it, text and icon inside are getting blurred. Any idea how to fix it?

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"

    }
}

Expected : Getting shadow and nice looking text and icons Actual : Getting shadow but text and icons are blurry

score 0 · Accepted Answer · answered Jan 22 '19 at 09:21

0

Your DropShadow is being applied to buttonOverview components area and as it is defined below the buttonOverview it will be positioned on top of it. If i am understanding your requirements you should move the DropShadow above the buttonOverview Rectangle component.

answered Jan 22 '19 at 09:21

teh_raab

384
1
3
21

Wow, didn't know placing dropshadow under or above the rectangle would make a difference since it's connected with ID Wow it really works, thank you so much man! My hair went gray after searching for solution :) Thanks a lot!! – Kacper Sitarz Jan 22 '19 at 10:28
No problem. With QML you need to factor in position of code. You can also use z-ordering to place it in front or behind objects but i find that a bit messy, especially with larger apps. If the answer helped, please make it the accepted answer :) – teh_raab Jan 22 '19 at 10:33
Oh yeah sorry Im new here, forgot about it :) Im on my internship as a frontend now and got a QML project to do while I never seen QML before. Thanks a lot once more :) – Kacper Sitarz Jan 22 '19 at 10:45
No worries. QML is fun. Good luck with your internship :) – teh_raab Jan 22 '19 at 10:46
Sorry about interupting once more but i dont wanna create a new topic to not spam. After placed dropshadow above the rectangle, my mousearea on rectangle stopped functioning. After adding a "z" to rectangle nothing happend. What should i do in this scenario? – Kacper Sitarz Jan 22 '19 at 11:06
I would suggest creating a new post with new updated code and problem :) – teh_raab Jan 22 '19 at 11:11

QML - DropShadow blurring text & img

1 Answers1