Glow QML Type

ソース画像をぼかして色付けし、元の画像の背後に配置することで、ソースが光っているような印象を与えます。詳細...

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

• cached : alias
• color : alias
• radius : alias
• samples : alias
• source : alias
• spread : alias
• transparentBorder : alias

詳細説明

例

以下の例は、エフェクトの適用方法を示しています。

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

    Rectangle {
        anchors.fill: parent
        color: "black"
    }

    Image {
        id: butterfly
        source: "images/butterfly.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    Glow {
        anchors.fill: butterfly
        radius: 8
        color: "white"
        source: butterfly
    }
}

プロパティのドキュメント

cached : alias

このプロパティを使用すると、エフェクトの出力ピクセルをキャッシュして、レンダリング性能を向上させることができます。

ソースまたはエフェクトのプロパティが変更されるたびに、キャッシュ内のピクセルを更新する必要があります。エフェクトの出力を保存するために追加のメモリバッファが必要となるため、メモリ消費量が増加します。

ソースやエフェクトのプロパティがアニメーション化される場合は、キャッシュを無効にすることをお勧めします。

デフォルトでは、このプロパティは「false 」に設定されています。

color : alias

このプロパティは、グローに使用されるRGBA色値を定義します。

デフォルトでは、このプロパティは"white" に設定されています。

radius : alias

半径は、グローの柔らかさを決定します。半径を大きくすると、グローの縁がよりぼやけて見えます。

半径の値に応じて、samples の値を、視覚的な品質を確保できる十分に大きな値に設定する必要があります。

理想的なぼかし効果は、samples とradius を次のように選択することで得られます。samples = 1 + radius * 2 、例えば：

デフォルトでは、このプロパティはfloor(samples/2) に設定されています。

samples : alias

このプロパティは、エッジのソフト化（ぼかし）計算を行う際に、1ピクセルあたり何サンプルを採取するかを定義します。値を大きくすると画質は向上しますが、レンダリングに時間がかかります。

理想的には、この値は、必要となる最大半径値の2倍に1を加えた値に設定します。例えば：

デフォルトでは、このプロパティは `9` に設定されています。

このプロパティはアニメーションの対象となることを意図していません。このプロパティを変更すると、基盤となるOpenGLシェーダーが再コンパイルされます。

source : alias

このプロパティは、生成されるグローのソースとして使用されるソース項目を定義します。

spread : alias

このプロパティは、光源の縁付近でグローカラーがどの程度強調されるかを定義します。

値の範囲は 0.0 から 1.0 です。デフォルトでは、このプロパティは0.5 に設定されています。

transparentBorder : alias

このプロパティは、エフェクトに透明な境界線があるかどうかを決定します。

true に設定すると、アイテムの外周に透明な縁が追加され、ソーステクスチャの外側をサンプリングする際に、縁のピクセルではなく透明度が使用されるようになります。このプロパティを設定しない場合、縁が不透明な画像では、縁がぼやけません。

デフォルトでは、このプロパティはtrue に設定されています。ソースにすでに透明な縁がある場合は、ぼかし処理をわずかに高速化するために、このプロパティをfalseに設定してください。

以下のスニペットでは、左側の矩形は透明な境界線を持ち、エッジがぼやけていますが、右側の矩形にはぼやけが見られません。

import QtQuick
import Qt5Compat.GraphicalEffects

Rectangle {
    width: 180
    height: 100

    Row {
        anchors.centerIn: parent
        spacing: 16

        Rectangle {
            id: normalRect
            width: 60
            height: 60
            color: "black"
            radius: 10
            layer.enabled: true
            layer.effect: Glow {
                samples: 15
                color: "blue"
                transparentBorder: false
            }
        }

        Rectangle {
            id: transparentBorderRect
            width: 60
            height: 60
            color: "black"
            radius: 10
            layer.enabled: true
            layer.effect: Glow {
                samples: 15
                color: "blue"
                transparentBorder: true
            }
        }
    }
}