Comments on: Thumbnail shadows

By: Tirpen

Tirpen — Tue, 13 Nov 2007 06:32:04 +0000

I didn’t mean that you should just scale them. Obviously you should cut out the areas near the corners and the edges and then just scale the edges. Sorry to be unclear.

By: Sébastien Laoût

Sébastien Laoût — Mon, 12 Nov 2007 20:46:21 +0000

Well, the blurring code may do the trick as well, and may be more optimized (using GPU in the future, or now).

Oh, and another optimization to not make application startup slower, you can generate the shadow parts only the first time a shadow need to be drawn (the corners and borders are pointers, if they are null, it’s the first time, generate them. The next times, the pointers are not null, simply use them).

So if the user starts Gwenview to view an image, no shadow has to be computed, so no time is lost.

By: Aurélien

Aurélien — Mon, 12 Nov 2007 08:46:05 +0000

@Sébastien Laoût: Thanks for the tips, will have a look at kshadowengine.cpp.

By: Top Posts « WordPress.com

Top Posts « WordPress.com — Sun, 11 Nov 2007 23:59:03 +0000

[...] Thumbnail shadows I have been working on improving the thumbnail view appearance lately. I recently added shadows behind thumbnails. It […] [...]

By: Sébastien Laoût

Sébastien Laoût — Sun, 11 Nov 2007 23:15:16 +0000

As an optimization, you can create 2 images:
- A 500×30 pixels one for the four corners and the top & bottom borders
- A 30×500 pixels one for the left & right borders

No need to crate a shadow of a 490×490 uniform pixels.

Or glossian blur, for that matter…

I think it’s a very good optimization to both caching the corners&borders and to generate them using two small rectangles!

By: Sébastien Laoût

Sébastien Laoût — Sun, 11 Nov 2007 23:10:47 +0000

1. Grab the code making shadows in kshadowengine.cpp of Kicker KDE3 library code base.

2. Do all this once at the application start:
- Create an image of say 500×500 pixels (bigger than any shadowed box you have to draw later on)
- Must draw a square of 490×490 pixels on the middle of the image
- Call the shadow method: the Kicker code will generate a shadow for you
- Finally, break the image in 9 parts: the four corners, the four borders, and the center part.

3. When you need to draw a shadow:
- Paint the four corners arround your image
- Paint the four borders arround your image, by clipping the drawing so that they are cutted down

Except that the application startup is slowed down, every drawings are then very fast.
I use that render,split&cache technics for Kirocker Music Display frame drawings (except that I have to stretch the borders and the middle part, which is slow).

By: Aurélien

Aurélien — Sun, 11 Nov 2007 21:52:42 +0000

@Jason: I tried this, using ImageBlitz blur implementation, but I couldn’t get a decent result. It’s also a bit overkill to gaussian blur an almost uniform image, even if I cache the generated shadow.

By: Jason

Jason — Sun, 11 Nov 2007 21:47:29 +0000

What about: start with the image’s QRect, offset it in x and y, fill it with black, and apply a Gaussin blur?

By: Stefan Monov

Stefan Monov — Sun, 11 Nov 2007 21:10:43 +0000

Ok let’s see, on second thought non-opaque images shouldn’t have a shadow indeed. Just go ahead and increase the corner radius to fix the glitch.

By: Aurélien

Aurélien — Sun, 11 Nov 2007 20:35:48 +0000

@Tirpen: I am not sure it would look great if I scale them. Plus, it’s nice to be able to tweak the shadow without modifying an image, even if the shadow parameters aren’t accessible from the user interface.

@LordBernhard: Thanks!

@Stefan: Right now no shadows are drawn being images which aren’t fully opaque.

@Liquidat: Thanks!