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 상자 그림자와 유사합니다. 또한 RectangularShadow API에는 다음이 포함됩니다:

• real radius: 직사각형 모서리에 적용되는 반올림 반경을 제어합니다. 부모 요소에서 반경을 상속하는 CSS 상자 그림자와 비교했을 때, RectangularShadow는 사용자가 반경을 설정해야 합니다. 이를 통해 다른 반경을 사용하고 부모 항목과 별도로 RectangularShadow를 이동할 수 있습니다.
• bool cached: 흐린 그림자 텍스처를 캐싱할 수 있습니다. 이렇게 하면 메모리 사용량이 증가하지만 특히 동적으로 변경되지 않는 큰 그림자의 경우 렌더링 성능이 향상될 수 있습니다.
• item material 고급 사용을 위한 RectangularShadow의 ShaderEffect 요소를 포함합니다. 이를 통해 예를 들어 커스텀 셰이더로 효과를 확장할 수 있습니다.

렌더링 출력도 CSS 상자 그림자와 일치하지만 눈에 띄는 차이점은 거의 없습니다. 이러한 차이점은 RectangularShadow를 최대한 고성능으로 만들기 위해 존재합니다.

• CSS 상자 그림자 구현에서 자주 사용하는 가우시안 블러를 사용하지 않고 셰이더에서 수학적으로 계산하여 블러를 적용합니다. 따라서 그림자가 약간 다르게 보이며, 특히 블러 값이 클수록 더욱 그렇습니다.
• 모든 사각형 모서리의 반경은 균일해야 합니다. 반경이 다른 Rectangle 에 대한 그림자를 만들 때는 그림자와 가장 잘 일치하는 반경을 선택하거나 다른 그림자 방법(예: MultiEffect)을 사용합니다.

다음은 Chrome 브라우저에서 RectangularShadow와 CSS 상자 그림자의 렌더링 출력을 비교하는 스크린샷이 포함된 표입니다. 가장 오른쪽에 있는 요소는 RectangularShadow에 1.2 을 곱한 값입니다(따라서 24, 48, 48)이 더 가깝게 일치합니다.

일부 다른 그림자(CSS 상자 그림자 포함)에는 크기에 대한 승수가 있는 반면, 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 { }
}