Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Layer effect with DropShadow makes the text blurred.



  • Hello developers,

    The combination of Item layer with drop shadow makes the text blurred inside the item. But I need DropShadow for the item component.

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    import QtGraphicalEffects 1.0
    
    Item {
        width: 170 * uiScale
        height: 144 * uiScale
    
        MouseArea {
            anchors.fill: parent
        }
    
        layer.enabled: true
        layer.effect: DropShadow {
            color: "#20000000"
            verticalOffset: 2
            horizontalOffset: 0
            radius: rect.radius
        }
    
        Item {
            anchors.fill: parent
            anchors.margins: 5
            Rectangle {
                id: rect
                anchors.fill: parent
                color: "#FCFCFC"
                border.color: "#EEEEEE"
                radius: 5
    
                Column {
                    spacing: 5
                    anchors.centerIn: parent
                    Label {
                        color: "#666666"
                        text: qsTr("hello")
                    }
                    Label {
                        color: "#666666"
                        text: qsTr("how are you")
                    }
                }
            }
        }
    }
    

    How to give layer effects without makes the text blurred.

    Thanks in advance.



  • @R_ram hi,
    This must be a bug.

    If i declare one component and instanciate it 2 times with a loader, i get one with blured text and the other without, there is no apparent reason for this...

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2
    import QtGraphicalEffects 1.0
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        property real uiScale: 1.22
    
        Component{
            id:it
            Item {
                width: 170 * uiScale
                height: 144 * uiScale
    
                MouseArea {
                    anchors.fill: parent
                }
    
                layer.enabled: true
                layer.effect: DropShadow {
                    color: "#20000000"
                    verticalOffset: 2
                    horizontalOffset: 0
                    radius: rect.radius
                }
    
                    Rectangle {
                        id: rect
                        anchors.fill: parent
                        color: "#FCFCFC"
                        border.color: "#EEEEEE"
                        radius: 5
    
                        Column {
                            spacing: 5
                            anchors.centerIn: parent
                            Label {
                                color: "#666666"
                                text: qsTr("hello")
                                font.pixelSize: 15 * uiScale
                            }
                            Label {
                                color: "#666666"
                                text: qsTr("how are you")
                                font.pixelSize: 15 * uiScale
                            }
                        }
                }
            }
        }
    
        Loader{ // no blured text 
            id:c1
            sourceComponent: it
        }
        Loader{ // blured text
            id:c2
            anchors.left: c1.right
            sourceComponent: it
        }
    }
    

    w7 , qt 5.12.2 mingw32



  • @LeLev Hi, Thanks for your reply.
    If this is a bug is there any workaround to get the same(shadow effect)? Please let me know if anything there.

    I have gone through this post in StackOverflow. I couldn't able to get that what that means. Will this helpful in the above case?


Log in to reply