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?

? Offline

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.

? Offline

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 :)