[SOLVED]Issue with shadow not rendering correctly.



  • I tried creating a simple button with a shadow effect. Yet because Qt paint the shadow only to the area available to the button I ended up with an ugly looking effect, abruptly cutting the shadow borders.

    import QtQuick 2.2
    import QtGraphicalEffects 1.0
    
    Item {
        id: menuButton
        width: 300
        height: 400
    
        Rectangle {
            id: menuButtonIcon
            x: parent.width - 75
            y: parent.height - 80
            color: Qt.lighter("#C02A25", 1.25)
            width: 60;
            height: 60;
            radius: width * 0.5
            antialiasing: true
            //visible: false;         // Hide the original because dropshadow duplicates it.
        }
    
        DropShadow {
            id: menuButtonIconShadow
            source: menuButtonIcon
            anchors.fill: source
            width: source.width
            height: source.height
            cached: true
            radius: 8.0
            samples: 16
            color: "#70000000"
            smooth: true
            horizontalOffset: 0.0
            verticalOffset: 0.0
            spread: 0.2
            transparentBorder: true
        }
    }
    

    I was not able to find a good way of getting past this, so I decided to split my button in two so as to be able to leave the appropriate free space.

    BaseButton

    import QtQuick 2.2
    
    Item {
        id: baseButton
    
        Rectangle {
            id: buttonIcon
            color: Qt.lighter("#C02A25", 1.25)
            width: 60;
            height: 60;
            radius: width * 0.5
            antialiasing: true
        }
    }
    

    MenuButton

    import QtQuick 2.2
    import QtGraphicalEffects 1.0
    
    Item {
        id: menuButton
        x: parent.width - 75
        y: parent.height - 80
        width: 300
        height: 400
    
        BaseButton {
            id: baseButton
            //visible: false;
        }
    
        DropShadow {
            id: menuButtonIconShadow
            source: baseButton.buttonIcon
            anchors.fill: source
            width: source.width
            height: source.height
            cached: true
            radius: 8.0
            samples: 16
            color: "#70000000"
            smooth: true
            horizontalOffset: 0.0
            verticalOffset: 0.0
            spread: 0.2
            transparentBorder: true
        }
    }
    

    But this time DropShadow had no effect at all.

    Am I doomed to remain shadowless.
    Or will a hero step up and restore the dark side?


  • Moderators

    Hi @ealione!

    Your first code produces this: https://drive.google.com/file/d/0B2D1UtsPfTx-dFJzRDhDajFRSk0/view?usp=sharing . What do you mean by "ugly looking effect, abruptly cutting the shadow borders"?



  • Hey @Wieland,

    You are correct. You can see what I was talking about if instead of true you type True for thetransparentBorder tag. For some reason I corrected it on the code I posted here, but not in my original code.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.