特定の領域にぼかしをかける

QtGraphicalEffects に含まれる MaskedBlur を使うことで、特定の領域にぼかしをかけることができます。

MaskedBlur の maskSource プロパティが「特定の領域」を指定するためのプロパティで、ここに指定されたアイテムや画像の各ピクセルのアルファ値を元にぼかしの度合いが計算されます。

以下のサンプルは、Flickr の API で取得したサムネイルの一覧を GridView で表示し、ヘッダとフッタの領域に入ったサムネイルをぼかすようにしています。

75行程度のシンプルなソースなので、是非自分でも書いて試してみてください。

import QtQuick 2.0
import QtGraphicalEffects 1.0
import QtQuick.XmlListModel 2.0

Rectangle {
    width: 300
    height: 450

    GridView {
        id: view
        anchors.fill: parent
        model: XmlListModel {
            source: 'http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags=Shinjuku'
            query: '/rss/channel/item'
            namespaceDeclarations: 'declare namespace media="http://search.yahoo.com/mrss/";'

            XmlRole { query: 'title/string()'; name: 'title' }
            XmlRole { query: 'media:thumbnail/@url/string()'; name: 'icon' }
        }

        delegate: MouseArea {
            width: 100
            height: 100
            Image {
                id: icon
                anchors.fill: parent
                anchors.margins: 5
                source: model.icon
                fillMode: Image.PreserveAspectCrop
                clip: true
            }
        }
        header: Item {
            width: view.width
            height: 20
        }
        footer: Item {
            width: view.width
            height: 40
        }
    }

    MaskedBlur {
        anchors.fill: view
        source: view
        radius: 8
        samples: 16
        maskSource: mask
    }

    Item {
        anchors.fill: view
        opacity: 0.75
        Item {
            id: mask
            anchors.fill: parent
            z: 1

            Rectangle {
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                height: view.headerItem.height
            }

            Rectangle {
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                height: view.footerItem.height
            }
        }
    }
}