[Interest] Draw a shadow around a Rectangle using DropShadow. Should be possible, right?

[Mark Gaiser]

For completeness.

Gunnar Sletta just responded. The right QML code:

import QtQuick 2.0
import QtGraphicalEffects 1.0

Rectangle {
    width: 800
    height: 600

    Rectangle{
        id: brContainer
        width: 500 + 16
        height: 50 + 16
        anchors.centerIn: parent
        border.color: "red"
        border.width: 1

        Rectangle {
            id: blackRect
            width: 500
            height: 50
            color: "black"
            anchors.centerIn: parent
            visible: false
        }

        DropShadow {
            anchors.fill: blackRect
            horizontalOffset: 3
            verticalOffset: 3
            radius: 16
            samples: 24
            color: "#80000000"
            transparentBorder: true;
            source: blackRect
        }
    }
}

and https://bugreports.qt-project.org/browse/QTBUG-36689 is thereby
closed already.. Oh well, i'm glad i know how it should be done now.

On Thu, Feb 6, 2014 at 3:18 PM, Mark Gaiser <markg85 at gmail.com> wrote:
> Done:
> https://bugreports.qt-project.org/browse/QTBUG-36689 (DropShadow
> doesn't work on rectangle)
> https://bugreports.qt-project.org/browse/QTBUG-36690 (Effects not
> always applied on application startup)
>
> On Thu, Feb 6, 2014 at 2:48 PM, Mark Gaiser <markg85 at gmail.com> wrote:
>> On Thu, Feb 6, 2014 at 2:03 PM, Sze Howe Koh <szehowe.koh at gmail.com> wrote:
>>> On 6 February 2014 19:59, Mark Gaiser <markg85 at gmail.com> wrote:
>>>> On Thu, Feb 6, 2014 at 11:33 AM, Sze Howe Koh <szehowe.koh at gmail.com> wrote:
>>>>> On 5 February 2014 23:35, Mark Gaiser <markg85 at gmail.com> wrote:
>>>>>> I can't get it to work with a rectangle..
>>>>>>
>>>>>> import QtQuick 2.0
>>>>>> import QtGraphicalEffects 1.0
>>>>>>
>>>>>> Rectangle {
>>>>>>     width: 800
>>>>>>     height: 600
>>>>>>
>>>>>>     DropShadow {
>>>>>>         horizontalOffset: 3
>>>>>>         verticalOffset: 3
>>>>>>         radius: 16
>>>>>>         samples: 24
>>>>>>         color: "#80000000"
>>>>>>         width: blackRect.width
>>>>>>         height: blackRect.height
>>>>>>         anchors.centerIn: parent
>>>>>>
>>>>>>         Rectangle {
>>>>>>             id: blackRect
>>>>>>             width: 500
>>>>>>             height: 50
>>>>>>             color: "black"
>>>>>>         }
>>>>>>     }
>>>>>> }
>>>>>
>>>>> Works for me. I copied your code exactly; you can see the result in
>>>>> the attachment.
>>>>
>>>> I just noticed that as well. On linux it works a lot less stable. Aka,
>>>> i have to start the application about 10x before i finally see one
>>>> where the shader effects (DropShadow in this case) are applied.
>>>>
>>>> Also note that you might have a "sort of shadow". It is by no means a
>>>> shadow. It's just a "copy" of the rectangle in the color set in
>>>> DropShadow. The actual shadow effect (smooth blurred grey.. don't
>>>> really know how to call it) isn't applied.
>>>
>>> Bug report time :-D Would you like to do the honours?
>>>
>>> Looks like there are two bugs here: 1) Effects don't always get
>>> applied on your Linux machine, and 2) DropShadow's doesn't work
>>> properly (on Rectangles?)
>>>
>>> I didn't notice the lack of blurriness until you mentioned it -- never
>>> used DropShadow myself.
>>>
>>>
>>> Regards,
>>> Sze-Howe
>>
>> Will do.
>> Making reports now.
>>
>> Generously using your screenshot :)