DropShadow QML Type

소스 항목 뒤에 부드러운 그림자를 생성합니다. 더 보기...

• 상속된 멤버를 포함한 모든 멤버 목록

속성

• cached : alias
• color : alias
• horizontalOffset : real
• radius : int
• samples : alias
• source : alias
• spread : alias
• transparentBorder : alias
• verticalOffset : real

상세 설명

DropShadow 효과는 입력 이미지의 알파 채널을 흐리게 처리한 후, 그 결과물에 색상을 입혀 소스 객체 뒤에 배치함으로써 부드러운 그림자를 생성합니다. 그림자의 색상은 color 속성을 사용하여 변경할 수 있습니다. 그림자의 위치는 horizontalOffset 및 verticalOffset 속성을 사용하여 변경할 수 있습니다.

부드러운 그림자는 가우시안 블러를 사용하여 이미지를 실시간으로 흐리게 처리함으로써 생성됩니다. 실시간 블러 처리는 높은 성능을 요구하는 작업입니다. 샘플 수가 적당히 많은 경우에도 전체 화면 가우시안 블러는 고성능 그래픽 하드웨어에서만 60fps로 실행됩니다.

소스가 정적일 경우, ` cached ` 속성을 설정하여 별도의 버퍼를 할당함으로써 렌더링할 때마다 블러 처리를 수행하지 않도록 할 수 있습니다.

예제

다음 예제는 이 효과를 적용하는 방법을 보여줍니다.

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

    Rectangle {
        anchors.fill: parent
    }

    Image {
        id: butterfly
        source: "images/butterfly.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    DropShadow {
        anchors.fill: butterfly
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        color: "#80000000"
        source: butterfly
    }
}

속성 설명서

cached : alias

이 속성을 사용하면 렌더링 성능을 향상시키기 위해 이펙트 출력 픽셀을 캐시에 저장할 수 있습니다. 소스나 이펙트 속성이 변경될 때마다 캐시에 저장된 픽셀을 업데이트해야 합니다. 이펙트 출력을 저장하기 위해 추가 메모리 버퍼가 필요하기 때문에 메모리 사용량이 증가합니다.

소스나 효과 속성에 애니메이션이 적용되는 경우에는 캐시를 비활성화하는 것이 좋습니다.

기본적으로 이 속성은 ‘ false ’로 설정되어 있습니다.

color : alias

이 속성은 그림자에 사용되는 RGBA 색상 값을 정의합니다.

기본적으로 이 속성은 "black" 로 설정되어 있습니다.

horizontalOffset : real

HorizontalOffset 및 verticalOffset 속성은 DropShadow 항목의 위치에 비해 렌더링된 그림자의 오프셋을 정의합니다. 대개 ' DropShadow ' 항목은 소스 요소를 채우도록 고정됩니다. 이 경우, HorizontalOffset 및 verticalOffset 속성이 0으로 설정되면 그림자가 소스 항목 바로 아래에 렌더링됩니다. 오프셋 속성을 변경하여 그림자를 소스 항목에 상대적으로 배치할 수 있습니다.

값의 범위는 -inf에서 inf까지입니다. 기본적으로 이 속성들은 0 로 설정되어 있습니다.

radius : int

반경은 그림자의 부드러움을 결정합니다. 반경이 클수록 그림자의 가장자리가 더 흐릿하게 보입니다.

이상적인 흐림 효과를 얻으려면 ‘ samples ’와 ‘ radius ’를 다음과 같이 설정하여 samples = 1 + radius * 2 이 되도록 합니다. 예를 들면 다음과 같습니다:

기본적으로 이 속성은 ` floor(samples/2)`로 설정되어 있습니다.

samples : alias

이 속성은 가장자리 부드럽게 처리 블러 계산을 수행할 때 픽셀당 몇 개의 샘플을 채취할지 정의합니다. 값이 클수록 화질은 좋아지지만, 렌더링 속도는 느려집니다.

이상적으로는 이 값을 필요한 최대 반경 값에 1을 더한 값의 두 배로 설정하는 것이 좋습니다. 예를 들면 다음과 같습니다.

기본적으로 이 속성은 ` 9`로 설정되어 있습니다.

이 속성은 애니메이션이 적용되도록 의도된 것이 아닙니다. 이 속성을 변경하면 기본 OpenGL 셰이더가 재컴파일됩니다.

source : alias

이 속성은 생성된 그림자의 소스로 사용될 소스 항목을 정의합니다.

spread : alias

이 속성은 그림자 색상이 광원 가장자리 근처에서 얼마나 강하게 표현될지를 정의합니다.

값의 범위는 0.0에서 1.0까지입니다. 기본적으로 이 속성은 0.0 로 설정되어 있습니다.

transparentBorder : alias

이 속성은 효과에 투명한 테두리가 적용될지 여부를 결정합니다.

true 로 설정하면 항목의 바깥쪽에 1픽셀 너비의 투명한 테두리가 추가되어, 소스 텍스처 외부에서 샘플링할 때 테두리 픽셀 대신 투명도가 사용됩니다. 이 속성이 없으면 테두리가 불투명한 이미지는 흐릿한 그림자가 생기지 않습니다.

아래 이미지에서 왼쪽의 사각형은 투명한 테두리를 가지고 있어 가장자리가 흐릿하게 처리된 반면, 오른쪽의 사각형은 그렇지 않습니다:

기본적으로 이 속성은 ` true`로 설정되어 있습니다.

import QtQuick
import Qt5Compat.GraphicalEffects

Rectangle {
    width: 180
    height: 100

    Row {
        anchors.centerIn: parent
        spacing: 16

        Rectangle {
            id: normalRect
            width: 60
            height: 60
            radius: 10
            color: "steelblue"
            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: false
                horizontalOffset: 8
                verticalOffset: 8
            }
        }

        Rectangle {
            id: transparentBorderRect
            width: 60
            height: 60
            radius: 10
            color: "steelblue"
            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: true
                horizontalOffset: 8
                verticalOffset: 8
            }
        }
    }
}

verticalOffset : real

HorizontalOffset 및 verticalOffset 속성은 ‘ DropShadow ’ 항목의 위치에 비해 렌더링된 그림자의 오프셋을 정의합니다. 대개 ‘ DropShadow ’ 항목은 소스 요소를 채우도록 고정됩니다. 이 경우, HorizontalOffset 및 verticalOffset 속성이 0으로 설정되면 그림자가 소스 항목 바로 아래에 렌더링됩니다. 오프셋 속성을 변경하여 그림자를 소스 항목에 상대적으로 배치할 수 있습니다.

값의 범위는 -inf에서 inf까지입니다. 기본적으로 이 속성들은 0 로 설정되어 있습니다.