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

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

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

• CSS 상자 그림자 구현에서 자주 사용하는 가우시안 블러를 사용하지 않고 셰이더에서 수학적으로 계산하여 블러를 적용합니다. 따라서 그림자가 약간 다르게 보이며, 특히 블러 값이 클 때 더욱 그렇습니다.
• Qt 6.11부터 RectangularShadow는 개별 모서리 반경 값도 지원합니다. 필요하지 않은 경우 최상의 성능을 위해 일반적인 radius 으로만 설정하세요.

다음은 크롬 브라우저에서 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
}

속성 문서

antialiasing : bool

그림자에 앤티앨리어싱을 사용할지 여부를 결정하는 데 사용됩니다. true 인 경우 blur 이 0 인 경우에도 단일 픽셀 앤티앨리어싱이 사용됩니다.

기본값은 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 항목과 위치 및 크기가 다른 경우가 많으므로 이 속성을 사용하여 그림자의 도달 범위를 시각화할 수 있습니다.

머티리얼은 사용자 지정 머티리얼로 대체할 수도 있습니다. 개별 모서리 반경을 사용하지 않을 때의 기본 머티리얼은 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 반경" 균일 값은 0 미만이며 "vec4 반경4"가 추가로 균일합니다. 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 을참조하세요 .