Shadow property for Rectangle

[kred]

Hi,

I would like to contribute to qml project, so I thought about adding 'shadow' property to the rectangle element with controllable properties. So far I saw that currently the only way to add shadow is to place Image element behind rectangle (correct me if I'm wrong). I would like to know if such feature make sense or if someone already did the job?

Regards,
Krzysztof

[kyleplattner]

I would love this. Go for it.

[xsacha]

I'm just wondering how your implementation works. Does it expand the width/height for the shadow and draw rectangle inside this? Does it have an extra variable for shadow width/radius? Or does it just draw the shadow and ignore everything else (if you see it, you see it)?

Also what method for the gradient/transparency/blur?

The current method of doing shadows (static image) in QML is:

Shadows.qml
@
import Qt 4.7
import "content"

Rectangle {
id: window

width: 480; height: 320
color: "gray"

ShadowRectangle {
    anchors.centerIn: parent; width: 250; height: 250
    color: "lightsteelblue"
}

ShadowRectangle {
    anchors.centerIn: parent; width: 200; height: 200
    color: "steelblue"
}

ShadowRectangle {
    anchors.centerIn: parent; width: 150; height: 150
    color: "thistle"
}

}
@

ShadowRectangle.qml
@
import Qt 4.7

Item {
property alias color : rectangle.color

BorderImage {
    anchors.fill: rectangle
    anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
    border { left: 10; top: 10; right: 10; bottom: 10 }
    source: "shadow.png"; smooth: true
}

Rectangle { id: rectangle; anchors.fill: parent }

}
@

Shadow.png:
http://goo.gl/8NWKx

Result:
http://goo.gl/bCCvv

[fcrochik]

Sacha: that was quick... Now you can add "angle" and "distance" properties and we can have animation with light effects :)

[Kxyu]

[quote author="kred" date="1291729784"] I thought about adding 'shadow' property to the rectangle element with controllable properties.[/quote]

well, it would be nice to have all photshop properties for shadow. and for all other layer effects - inner shadow, gradient overlay, bevel aand emboss etc.

[xsacha]

fcrochik: you can use the rotation property to get 'angle' and the 'distance' property is simply the border left/top/right/bottom.

[kred]

Thanks for replies. Currently I don't have implementation ready, I just wanted to know if there will be interests in it.

I have on my mind three possible implementations:

• 'shadow' attribute of rectangle
• 'shadow' item with content (like flickable element)
• 'blur' effect on any item - i.e. place colour rectangle with 'blur' modifier behind any other object.
• other option would be to pack what Sacha wrote into some nice class

[xsacha]

Well the only concern (I think on the part of QML devs) is performance.
If you can get the shadows not to use up too much power on low-powered devices, I think it'd be worthwhile having it in there as a C++ class.

I found my implementation (which is actually from the SDK by the way) doesn't work with rotation.

[kred]

Yes, i tried QML on Nokia 5800 and performance is an issue. On Nokia N8 it works much better.
I'm just compiling clean qt/declarative, let's see where it will come.

[xsacha]

I don't see why the QML devs can't move on and allow some extra stuff that only the newer phones are capable of (other than multi-touch). It seems silly to restrict future devices (and desktops) because of lack of hardware in past devices.

There could be a test to see if it's capable (Symbian^3 or higher?) and then enable shadows, for example.

I wonder, would shadows benefit from a QGLWidget at all?

[Guest]

effects like drop shadow/blur were part of QML earlier on, but now removed due to performance issues .. (somewhere I read that it will be back in a future release)

chk this "link":http://lists.trolltech.com/pipermail/qt-qml/2010-April/000224.html

so the best way forward would be to introduce your own QGraphics<Custom>Effect and take it from there

[kred]

Oh, I just started to implement it in the same way - by providing QGraphicsEffect to QML :/
Ok, so I think topic can be closed.

[Guest]

ok will close the topic, also do chk the Qt3d module, lot of very cool things are being done there ... there is a QML Effect element there .. you can dig further :)

this topic is now being closed for discussion as requested :)