Qt QML - FastBlur with rounded corners rectange and background image



  • 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
    }
    

    @



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



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



  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.