Shadow property for Rectangle
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
12 replies
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
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
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.
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?
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 [lists.trolltech.com]
so the best way forward would be to introduce your own QGraphics<Custom>Effect and take it from there
You must log in to post a reply. Not a member yet? Register here!






