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

[Mark Gaiser]

On Wed, Feb 5, 2014 at 4:11 PM, Sze Howe Koh <szehowe.koh at gmail.com> wrote:
> On 5 February 2014 22:31, Mark Gaiser <markg85 at gmail.com> wrote:
>> Hi,
>>
>> I "thought" i could just use any of the QtGraphicalEffects and apply
>> them to any item.
>> But when i try to apply a simple shadow to a rectangle (or a glow) i
>> don't get any shadow. Instead, the destination rectangle simply gets
>> filled with the color i provided as shadow.
>>
>> In case it matters.
>> Nvidia (binary blob) on Linux (ArchLinux).
>>
>> I'm really curious to know why this isn't working properly.
>> It doesn't seem to be an issue on images elements...
>>
>> The code isn't big so i'm just posting it in this mail:
>>
>> 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
>>         }
>>     }
>>
>>     DropShadow {
>>         anchors.fill: brContainer
>>         horizontalOffset: 3
>>         verticalOffset: 3
>>         radius: 16
>>         samples: 24
>>         color: "#80000000"
>>         source: blackRect
>>     }
>> }
>
> Hi,
>
> I encountered this puzzle recently. I had to put my Rectangle/Image
> _inside_ my RectangularGlow (I'm guessing you can replace
> RectangularGlow with DropShadow):
>
> RectangularGlow {
>     color: "cyan"
>     width: img.width
>     height: img.height
>
>     Image {
>         id: img
>         source: "myimage.jpg"
>     }
> }
>
> On one hand, it makes sense because the Image is smaller than the
> RectangularGlow (so the Image is "inside" the RectangularGlow).
>
> On the other hand, this expression is counter-intuitive. I would love
> to hear if there's a better way to do this!

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