RectangularShadow QML Type

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

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

プロパティ

• antialiasing : bool
• blur : real
• cached : bool
• color : color
• material : item
• offset : vector2d
• radius : real
• spread : real

詳細説明

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ボックスシャドウの実装でよく使われるガウスぼかしではなく、シェーダー内で数学的に計算されます。このため、特にぼかしの値が大きくなると、シャドウの見え方が若干異なります。
• すべての矩形の角の半径は均等でなければなりません。異なる半径を持つRectangle にシャドウを作成する場合は、シャドウに最適な半径を選択するか、別のシャドウ方法、例えばMultiEffect を使用してください。

以下は、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
}

プロパティの説明

#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;
}

RectangularShadow {
    ...
    material: MyShadowEffect { }
}