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 プロパティで変更できます。

ソフトシャドウは、ガウスぼかしを使用して画像をライブでぼかすことによって作成されます。ライブでぼかしをかけるのはコストのかかる作業です。適度なサンプル数のフルスクリーンガウスぼかしは、ハイエンドグラフィックスハードウェアでは60fpsでしか動作しません。

ソースが静的な場合、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 に設定すると、影はソース アイテムの下に正確にレンダリングされます。offsetプロパティを変更することで、影をソースアイテムに対して相対的に配置することができます。

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

radius : int

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

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

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

samples : alias

このプロパティは、エッジ・ソフトニング・ブラー計算が行われる際に、ピクセルあたりいくつのサンプルが取得されるかを定義する。値を大きくすると画質は良くなりますが、レンダリングに時間がかかります。

理想的には、この値は必要な半径の最高値に1を足した値の2倍にする必要があります：

デフォルトでは、このプロパティは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 に設定すると、影はソース アイテムの下に正確にレンダリングされます。offsetプロパティを変更することで、影をソースアイテムに対して相対的に配置することができます。

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