CODEWITHSUNDEEP
javascriptqtqmleffects
VP.
VP.

Reputation: 16765

QML Shader Effect blur behind an item

Is it possible to make a blur of an item which is behind another item?

Example: blur a part of image (like in qml - parent.centerIn: image)

Blur example

I want something like: 

Image { id: img
    anchors.fill: parent
    source: "bug.png"

    Item { id: info
        anchors.centerIn: parent
        height: 200
        width: 200

        Text {
            text: "HAMMER TIME"
            color: "white"
        }

        /* BLUR CODE HERE TO BLUR BACKGROUND OF THIS ITEM */
        /* which is a part of "bug.png" image with 200x200 size */
        /* and offset equals to "info.x" and "info.y" */
    }
}

This question affects any shader effect because official docs dont have an answer for the question and all of my attempts are unsuccessfull - it is only possible to blur WHOLE ITEM but not a part of it.

Upvotes: 6

Views: 6597

Answers (2)

wuschelhase
wuschelhase

Reputation: 1114

Here is my solution. This version is just applicable to Rectangles. The Item ShaderEffectSource helps with creating such a source rectangle.

enter image description here

import QtQuick 2.3
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 600
    height:600

    Image {
        id: image_bug

        anchors.fill: parent
        source: "images/Original_bug.png"
    }

    ShaderEffectSource {
        id: effectSource

        sourceItem: image_bug
        anchors.centerIn: image_bug
        width: 400
        height: 400
        sourceRect: Qt.rect(x,y, width, height)
    }

    FastBlur{
        id: blur
        anchors.fill: effectSource

        source: effectSource
        radius: 100
    }
}

If you need other shapes, I think you might need to apply a mask-shader, cutting out the relevant parts first and then apply the blur.

Upvotes: 10

pawel
pawel

Reputation: 231

Not the prettiest solution but I afraid there is no such Qml mechanism.
You could apply on your image second image with same source and clip it to your needs, like below:

Image {
    id: img
    anchors.fill: parent
    source: "bug.png"

    Item { id: info
        anchors.centerIn: parent
        height: 200
        width: 200

    Text {
        text: "HAMMER TIME"
        color: "white"
    }

    /* BLUR CODE HERE TO BLUR BACKGROUND OF THIS ITEM */
    /* which is a part of "bug.png" image with 200x200 size */
    /* and offset equals to "info.x" and "info.y" */

    clip:true
    Image {
        id: img2
        x: -info.x
        y: -info.y
        width: img.width
        height: img.height
        source: img.source
    }
    FastBlur {
        anchors.fill: img2
        source: img2
        radius: 32
    }
}

Upvotes: 0

Related Questions