RectangularShadow QML Type

平滑化された矩形を作成します。詳細...

• 継承されたメンバを含む、すべてのメンバのリスト

プロパティ

• antialiasing : bool
• blur : real
• bottomLeftRadius : real (since 6.11)
• bottomRightRadius : real (since 6.11)
• cached : bool
• color : color
• material : item
• offset : vector2d
• radius : real
• spread : real
• topLeftRadius : real (since 6.11)
• topRightRadius : real (since 6.11)

詳細説明

RectangularShadow は、ぼかしを適用した丸みを帯びた長方形です。RectangularShadow のパフォーマンスは、どのような形状のアイテムにもぼかした影/輝きを作成する一般的なものよりもはるかに優れています。

次の例では、Rectangle に影を付ける方法を示しています：

import QtQuick
import QtQuick.Effects

...
RectangularShadow {
    anchors.fill: myRectangle
    offset.x: -10
    offset.y: -5
    radius: myRectangle.radius
    blur: 30
    spread: 10
    color: Qt.darker(myRectangle.color, 1.6)
}
Rectangle {
    id: myRectangle
    anchors.centerIn: parent
    width: 200
    height: 100
    radius: 50
    color: "#c0d0f0"
}

RectangularShadowのAPIはCSSのbox-shadowに似ており、色、オフセット、広がり、ぼかしの値があります。さらに、RectangularShadowのAPIには以下が含まれる：

• real radius矩形の角に適用される丸め半径を制御します。CSSのbox-shadowが親要素から半径を継承するのに対して、RectangularShadowはユーザーが半径を設定することを想定しています。これにより、異なる半径を使用したり、RectangularShadowを親アイテムとは別に移動させたりすることができます。
• bool cached: ぼかしたシャドウのテクスチャをキャッシュできるようになりました。これは、特に動的に変化しない大きなシャドウで、レンダリングパフォーマンスを向上させる可能性がある一方で、メモリ使用量を増加させます。
• item materialRectangularShadow のShaderEffect 要素を含みます。これにより、たとえば、カスタムシェーダーで効果を拡張できます。

レンダリング出力もCSSのボックスシャドウと一致しますが、顕著な違いはほとんどありません。これらの違いは、RectangularShadowを可能な限り高性能にするために存在します。

• ぼかしは、CSSボックスシャドウの実装でよく使われるガウスぼかしではなく、シェーダー内で数学的に計算されます。このため、特にぼかしの値が大きくなると、シャドウの見え方が若干異なります。
• Qt 6.11 以降、RectangularShadow は個別のコーナー半径値もサポートしています。必要ない場合は、最高のパフォーマンスを得るために、一般的なradius のみを設定してください。

以下は、ChromeブラウザでのRectangularShadowとCSS box-shadowのレンダリング出力を比較したスクリーンショット付きの表です。一番右の要素はRectangularShadowのぼかしに1.2 （24,48,48 ）を掛けたものです。

他のいくつかのシャドウ（CSS box-shadowを含む）がサイズに乗数を持つのに対し、RectangularShadowはぼかし量に関する正確な量でシャドウのサイズを拡張します。RectangularShadow内のシャドウアイテムのサイズは以下の通りです：

width = rectangularShadow.width + 2 * blur +  2 * spread
height = rectangularShadow.height + 2 * blur + 2 * spread

例えば、以下のコードのシャドウアイテムのサイズは280x180ピクセルです。半径やオフセットの値は、シャドウアイテムのサイズに影響しません。

RectangularShadow {
    width: 200
    height: 100
    blur: 30
    spread: 10
    radius: 20
}

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

antialiasing : bool

シャドウにアンチエイリアスを使用するかどうかを決定するために使用されます。これがtrue の場合、blur が0 の場合でも、1 ピクセルのアンチエイリアスが使用されます。

デフォルト値はtrue です。

blur : real

このプロパティは、アイテム領域の外側の何ピクセルに影が到達するかを定義する。

値の範囲は 0.0（ぼかしなし）から inf（無限ぼかし）までです。デフォルト値は10.0 です。

bottomLeftRadius : real [since 6.11]

このプロパティは、左下隅の描画に使用される半径を保持します。

bottomLeftRadiusが設定されていない場合、代わりにradius 。bottomLeftRadius が 0 の場合、コーナーはシャープになります。

このプロパティは Qt 6.11 で導入されました。

radius,topLeftRadius,topRightRadius,bottomRightRadiusも参照してください 。

bottomRightRadius : real [since 6.11]

このプロパティは、右下隅の描画に使用される半径を保持します。

bottomRightRadiusが設定されていない場合、代わりにradius 。bottomRightRadius がゼロの場合、コーナーはシャープになります。

このプロパティは Qt 6.11 で導入されました。

radius,topLeftRadius,topRightRadius,bottomLeftRadiusも参照してください 。

cached : bool

このプロパティは、レンダリングのパフォーマンスを向上させるために、エフェクトの出力ピクセルをキャッシュできるようにします。

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

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

デフォルト値はfalse です。

color : color

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

デフォルト値はQt.rgba(0.0, 0.0, 0.0, 1.0) （黒）です。

material : item

このプロパティには、影のShaderEffect アイテムが含まれる。blur,offset,spread によって、効果項目はRectangularShadow 項目とは異なる位置とサイズを持つことが多いため、このプロパティを使用して影の到達点を視覚化することができます。

このマテリアルは、カスタムのものに置き換えることもできます。個別のコーナー半径を使用しない場合のデフォルトのマテリアルは、ShaderEffect で、fragmentShader のようになります：

#version 440

layout(location = 0) in vec2 texCoord;
layout(location = 1) in vec2 fragCoord;
layout(location = 0) out vec4 fragColor;

layout(std140, binding = 0) uniform buf {
    mat4 qt_Matrix;
    float qt_Opacity;
    vec4 color;
    vec3 iResolution;
    vec2 rectSize;
    float radius;
    float blur;
};

float roundedBox(vec2 centerPos, vec2 size, float radii) {
    return length(max(abs(centerPos) - size + radii, 0.0)) - radii;
}

void main()
{
    float box = roundedBox(fragCoord - iResolution.xy * 0.5, rectSize, radius);
    float a = 1.0 - smoothstep(0.0, blur, box);
    fragColor = color * qt_Opacity * a * a;
}

個々のコーナー半径を使用する場合、"float radius "ユニフォームの値は< 0で、さらに "vec4 radius4 "ユニフォームがあります。vec4内のコーナー半径値の順序は、左上、右上、左下、右下です。

Qt Quick Effect Makerには、カスタムマテリアルの出発点として使用できるRectangularShadow ノードが含まれています。そのノードを含むエクスポートされたエフェクトをRectangularShadow マテリアルとして直接使用できます。

RectangularShadow {
    ...
    material: MyShadowEffect { }
}

デフォルトマテリアルの使用に戻るには、マテリアルプロパティをnull に設定します。

offset : vector2d

このプロパティは、影に使用される位置オフセットを定義する。このオフセットは、RectangularShadow アイテムの位置からの相対的なシャドウ位置に追加されます。

デフォルト値はQt.vector2d(0.0, 0.0) （オフセットなし）です。

radius : real

このプロパティは、角を丸めた影を描くために使用される角の半径を定義する。

値の範囲は、0.0 からアイテムの有効幅または高さのいずれか小さい方の半分までである。

デフォルト値は0 です。

spread : real

このプロパティは、シャドウをピクセル単位でどれだけ広げるかを定義する。この広がりは、RectangularShadow アイテムのサイズに対するシャドウのサイズに追加されます。

値の範囲は -inf から inf です。デフォルト値は0.0 です。

topLeftRadius : real [since 6.11]

このプロパティは、左上隅の描画に使用される半径を保持します。

topLeftRadiusが設定されていない場合、代わりにradius 。topLeftRadius が 0 の場合、コーナーはシャープになります。

このプロパティはQt 6.11で導入されました。

radius,topRightRadius,bottomLeftRadius,bottomRightRadiusも参照してください 。

topRightRadius : real [since 6.11]

このプロパティは、右上隅の描画に使用される半径を保持します。

topRightRadiusが設定されていない場合、代わりにradius 。topRightRadius がゼロの場合、コーナーはシャープになります。

このプロパティは Qt 6.11 で導入されました。

radius,topLeftRadius,bottomLeftRadius,bottomRightRadiusも参照してください 。