December 7, 2010

kred kred
Lab Rat
3 posts

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

December 7, 2010

kyleplattner kyleplattner
Lab Rat
199 posts

I would love this. Go for it.

December 7, 2010

xsacha xsacha
Lab Rat
502 posts

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

  1. import Qt 4.7
  2. import "content"
  3.  
  4. Rectangle {
  5.     id: window
  6.  
  7.     width: 480; height: 320
  8.     color: "gray"
  9.  
  10.     ShadowRectangle {
  11.         anchors.centerIn: parent; width: 250; height: 250
  12.         color: "lightsteelblue"
  13.     }
  14.  
  15.     ShadowRectangle {
  16.         anchors.centerIn: parent; width: 200; height: 200
  17.         color: "steelblue"
  18.     }
  19.  
  20.     ShadowRectangle {
  21.         anchors.centerIn: parent; width: 150; height: 150
  22.         color: "thistle"
  23.     }
  24. }

ShadowRectangle.qml

  1. import Qt 4.7
  2.  
  3. Item {
  4.     property alias color : rectangle.color
  5.  
  6.     BorderImage {
  7.         anchors.fill: rectangle
  8.         anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
  9.         border { left: 10; top: 10; right: 10; bottom: 10 }
  10.         source: "shadow.png"; smooth: true
  11.     }
  12.  
  13.     Rectangle { id: rectangle; anchors.fill: parent }
  14. }

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

Result:
http://goo.gl/bCCvv

 Signature 

- Sacha

December 7, 2010

fcrochik fcrochik
Lab Rat
447 posts

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

 Signature 

Certified Specialist & Qt Ambassador Maemo, Meego, Symbian, Playbook, RaspberryPi, Desktop… Qt everywhere!

December 7, 2010

Kxyu Kxyu
Lab Rat
139 posts
kred wrote:
I thought about adding ‘shadow’ property to the rectangle element with controllable properties.

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.

December 8, 2010

xsacha xsacha
Lab Rat
502 posts

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

 Signature 

- Sacha

December 8, 2010

kred kred
Lab Rat
3 posts

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

December 8, 2010

xsacha xsacha
Lab Rat
502 posts

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.

 Signature 

- Sacha

December 8, 2010

kred kred
Lab Rat
3 posts

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.

December 8, 2010

xsacha xsacha
Lab Rat
502 posts

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?

 Signature 

- Sacha

December 8, 2010

Deleted Member # 4a2 Deleted Member # 4a2
Ant Farmer
1274 posts

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

December 8, 2010

kred kred
Lab Rat
3 posts

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

December 8, 2010

Deleted Member # 4a2 Deleted Member # 4a2
Ant Farmer
1274 posts

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

 
  ‹‹ QML Resolution Independence      QML Popup Single Selection List ››

You must log in to post a reply. Not a member yet? Register here!