DropShadow QML Type

対象アイテムの背後にソフトな影を生成します。詳細...

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

プロパティ

• cached : alias
• color : alias
• horizontalOffset : real
• radius : int
• samples : alias
• source : alias
• spread : alias
• transparentBorder : alias
• verticalOffset : real

詳細な説明

DropShadowエフェクトは、入力のアルファチャンネルをぼかし、その結果に色を付け、ソースオブジェクトの背後に配置することで、柔らかな影を作成します。影の色は、color プロパティを使用して変更できます。影の位置は、horizontalOffset およびverticalOffset プロパティを使用して変更できます。

ソフトシャドウは、ガウスぼかしを使用して画像をリアルタイムでぼかすことで作成されます。リアルタイムでのぼかし処理は負荷の高い操作です。サンプル数がそれほど多くない場合でも、フルスクリーンのガウスぼかしは、ハイエンドのグラフィックスハードウェアであっても60 fpsでしか実行されません。

ソースが静止している場合、cached プロパティを設定して別のバッファを割り当てることで、描画のたびにぼかし処理を実行する必要を回避できます。

例

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

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

    Rectangle {
        anchors.fill: parent
    }

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

    DropShadow {
        anchors.fill: butterfly
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        color: "#80000000"
        source: butterfly
    }
}

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

cached : alias

このプロパティを使用すると、エフェクトの出力ピクセルをキャッシュして、レンダリングパフォーマンスを向上させることができます。ソースまたはエフェクトのプロパティが変更されるたびに、キャッシュ内のピクセルを更新する必要があります。エフェクトの出力を保存するために追加のメモリバッファが必要となるため、メモリ使用量が増加します。

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

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

color : alias

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

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

horizontalOffset : real

HorizontalOffset およびverticalOffset プロパティは、DropShadow 項目の位置に対する、レンダリングされた影のオフセットを定義します。 多くの場合、DropShadow アイテムは、ソース要素全体を覆うように配置されます。この場合、HorizontalOffsetおよびverticalOffset プロパティが0に設定されていると、影はソースアイテムの真下にレンダリングされます。オフセットプロパティを変更することで、影をソースアイテムに対して相対的な位置に配置することができます。

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

radius : int

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

理想的なぼかし効果は、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.0 に設定されています。

transparentBorder : alias

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

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

下の画像では、左側の長方形は透明な境界線があり、エッジがぼやけていますが、右側の長方形にはそれがありません。

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

import QtQuick
import Qt5Compat.GraphicalEffects

Rectangle {
    width: 180
    height: 100

    Row {
        anchors.centerIn: parent
        spacing: 16

        Rectangle {
            id: normalRect
            width: 60
            height: 60
            radius: 10
            color: "steelblue"
            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: false
                horizontalOffset: 8
                verticalOffset: 8
            }
        }

        Rectangle {
            id: transparentBorderRect
            width: 60
            height: 60
            radius: 10
            color: "steelblue"
            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: true
                horizontalOffset: 8
                verticalOffset: 8
            }
        }
    }
}

verticalOffset : real

HorizontalOffset および verticalOffset プロパティは、DropShadow アイテムの位置に対する、レンダリングされた影のオフセットを定義します。 多くの場合、DropShadow 項目は、ソース要素いっぱいに収まるように配置されます。この場合、HorizontalOffsetおよびverticalOffsetプロパティが0に設定されていると、影はソース項目の真下に正確にレンダリングされます。オフセットプロパティを変更することで、影をソース項目に対して相対的な位置に配置することができます。

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