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)로, CSS box-shadow와 더 유사하게 보이도록 조정되었습니다.

RectangularShadow는 블러 양에 따라 그림자 크기를 정확한 비율만큼 확장하는 반면, 다른 그림자(CSS box-shadow 포함)는 크기에 곱셈 계수가 적용됩니다. 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가 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도 참조하십시오 .