QML Shader Effect blur за объектом

Question

Возможно ли размытие элемента, находящегося за другим элементом?

Пример: размыть часть изображения (как в QML - parent.centerIn: изображение)

Я хочу что-то вроде:

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" */ 
    } 
} 

Этот вопрос затрагивает какой-либо shader effect, потому что официальный docs не имеют ответа на вопрос, и все мои попытки не увенчались успехом - можно только размыть WHOLE ITEM, но не является его частью.

Answer 1

Вот мое решение. Эта версия применима только к Rectangles. Элемент ShaderEffectSource помогает создать такой прямоугольник источника.

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

Если вам нужны другие формы, я думаю, что вам, возможно, придется применить маску-шейдер, вырезая соответствующие части первой, а затем применить размытие.

Answer 2

Не самое красивое решение, но я боюсь, что такого механизма Qml нет.
Вы могли бы применить на своем изображении второе изображение с одного источника и закрепить его с вашими потребностями, как показано ниже:

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