A semi-transparent Rectangle that also blurs
-
In QML, you can create a Rectangle with a semi-transparent background color that partially shows what is underneath it. This is great for creating slide-out panels that let the user still get a sense of what is underneath.
Is it possible to also add a blurring effect in addition to the transparency? Much like some of the "panels in iOS 7":http://media.heavy.com/media/2013/09/ios-7-battery-tips-wifi-bluetooth.jpg. I'm guessing that this could be done by applying a ShaderEffect, but using ShaderEffect requires providing a "src" component. However, I'd like the Rectangle to blur what's underneath more generally. That is, without any knowledge of or references to the items that are underneath it.
Any thoughts on how this would be achieved?
-
Yes, it is possible and quite easy: check out "Qt Graphical Effects":http://www.ics.com/blog/qt-graphical-effects-module#.Uw2S-kddUs0.
-
Thanks for the link. I'm aware of the GraphicalEffects module. Yes, it's easy to blur an image, but I'm talking about blurring an arbitrary section of any QML UI. For example, imagine a QML scene with a draggable Rectangle that floats on top of the scene. I want to have that Rectangle blur anything that lies beneath it.
The Blur effects require a "source" component to which to apply the blur, but in my example there is no single source component. The Rectangle could overlap with any item in the scene.
Hopefully this makes sense?
-
No, I still think it is doable using FastBlur and friends. I have definitely used that to blur my whole UI using a Rectagle. If it would also work for a dynamic, draggable Rectangle: I am not sure, you would need to try.
-
This post was about a year ago, yet it never got answered... I'm also very curious if there's a QML solution to apply a blur WITH transparency. Yes, you can use FastBlur and friends to blur from a source, but how do you ALSO make it transparent? That is, when an item comes IN BETWEEN the background source item you're blurring against AND the foreground item you want blurred, have the blurred image reflect that item in between the two layers. Kersson's screenshot clearly shows an example of how iOS makes this effect.
I've always had to sacrifice the blur or transparency, so I'm curious if anyone has found a way to do both with QML. Maybe some sort of color that acts as a blur?
-
Just as a followup to this, I found an example of the behavior we are looking for in CSS and javascript.
-
Is this what you want? http://pastebin.com/VgTuzSY6
it looks like this
The project with images:
http://dropcanvas.com/r1r73
