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 material: 高度な用途向けに、RectangularShadowの 要素が含まれています。これにより、例えばカスタムシェーダーを使用してエフェクトを拡張することが可能になります。ShaderEffect

レンダリング出力もCSSのbox-shadowと一致しており、目立った違いはほとんどありません。これらの違いは、RectangularShadowのパフォーマンスを可能な限り高めるために存在します。

• ぼかしは、CSSのbox-shadowの実装でよく使用されるガウスぼかしではなく、シェーダー内で数学的に計算されます。これにより、特にぼかしの値が大きい場合、影の外観がわずかに異なって見えます。
• Qt 6.11以降、RectangularShadowは各コーナーの半径値を個別に設定することもサポートしています。必要がない場合は、最高のパフォーマンスを得るために、共通のradius のみを設定してください。

以下は、ChromeブラウザにおけるRectangularShadowとCSSのbox-shadowのレンダリング結果を比較したスクリーンショット付きの表です。右端の要素は、より近い外観にするために、RectangularShadowのぼかし値に1.2 を乗じたものです（つまり、24 、48 、48 ）。

RectangularShadow は、ぼかし量に応じてシャドウのサイズを正確な量だけ拡大しますが、他のシャドウ（CSS の box-shadow を含む）にはサイズに対する乗数が設定されています。RectangularShadow 内のシャドウ項目のサイズは次のとおりです：

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

たとえば、以下のコードのシャドウ項目のサイズは 280×180 ピクセルです。半径やオフセットの値は、シャドウ項目のサイズに影響しません。

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 が 0 の場合、角は鋭角になります。

このプロパティは 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 アイテムとは異なる場合が多いため、このプロパティを使用することでシャドウの広がりを可視化できます。

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

#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 が 0 の場合、角は鋭角になります。

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

関連項目： radius 、topLeftRadius 、bottomLeftRadius 、およびbottomRightRadius 。