Qt 5 の未来は明るいブログ

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

Published: 2013-06-22 / Last modified: 2013-06-22

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