Qt QML - FastBlur with rounded corners rectange and background image

marcin100

Hello,

Does anyone know how to make the FastBlur fit the rectangle with rounded corners? I tried many things and failed.

I tried MaskedBlur with same negative results.

FastBlur with OpacityMask would work if the mask could be inversed. What I did here is I blurred the whole background and then applied the OpacityMask to the rectangle with round corners. The mask fits nicely with rounded corners but it leaves blur everywhere except the rectangle.
I am looking for the exact opposite effect. Any ideas?

Second question: FastBlur - source: ??
Assume there is a background image (id: background) filling whole screen and a small rectangle in the middle. I noticed that if I set the source: background for FastBlur then the whole blurred backround image is scalled and fitted into the rectangle.
What is the proper way of having a blured rectangle which could be animated and moved on top of a background image?

@ Image {
id: background
width: parent.width
height: parent.height
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 0
anchors.topMargin: 0
source: "img/Dark_blue_800x480.jpg"
anchors.fill: parent
}

FastBlur
{
    anchors.fill: button1
    source: background
    radius: 20
}

Rectangle
{
    id: button1
    anchors.centerIn: parent
    width: 100
    height: 50
}

@

marcin100

Hmmm. Is this really not possible? Qt Quick limitation maybe?

Gianluca

Did you try to set source to Rectangle ?
@

FastBlur {
anchors.fill: button1
source: button1
radius: 20
}

Rectangle {
id: button1
visible: false /* IMPORTANT !! The source has to be invisible */
anchors.centerIn: parent
width: 100
height: 50
}
@

Answer to FastBlur source: source can be any visual Qt Quick Item, so it can be a Rectangle. Do not limit yourself to images :-)

marcin100

Yes I tried it, but slightly different. The button1 has to be visible because it also has text which is not blurred, so I created a child rectangle which filled button1 and set this one to invisible and made it a source for FastBlur.
But nothing was blurred. Maybe because the rectangle I created was two levels a above the background.
I will do more experiments and report back. Thanks.