[SOLVED]Issue with shadow not rendering correctly.

[ealione]

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?

[A Former User]

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"?

[ealione]

Hey @Wieland,

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