Glow QML Type

소스 이미지를 흐릿하게 처리하고 색상을 입힌 뒤, 원본 이미지 뒤에 배치하여 소스가 빛나는 듯한 인상을 줍니다. 더 보기...

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

속성

• cached : alias
• color : alias
• radius : alias
• samples : alias
• source : alias
• spread : alias
• transparentBorder : alias

상세 설명

예시

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

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

    Rectangle {
        anchors.fill: parent
        color: "black"
    }

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

    Glow {
        anchors.fill: butterfly
        radius: 8
        color: "white"
        source: butterfly
    }
}

속성 설명

cached : alias

이 속성을 사용하면 렌더링 성능을 향상시키기 위해 이펙트 출력 픽셀을 캐시에 저장할 수 있습니다.

소스나 효과 속성이 변경될 때마다 캐시에 저장된 픽셀을 업데이트해야 합니다. 효과 출력을 저장하기 위해 추가 메모리 버퍼가 필요하기 때문에 메모리 사용량이 증가합니다.

소스 또는 효과 속성이 애니메이션 처리되는 경우 캐시를 비활성화하는 것이 좋습니다.

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

color : alias

이 속성은 광효 흉에 사용되는 RGBA 색상 값을 정의합니다.

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

radius : alias

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

반경 값에 따라, 시각적 품질을 보장하기 위해 ‘ samples ’의 값을 충분히 크게 설정해야 합니다.

이상적인 블러 효과는 ‘ samples ’과 ‘ radius ’을 다음과 같이 선택하여 ‘ samples = 1 + radius * 2 ’이 되도록 설정할 때 얻을 수 있습니다. 예를 들면 다음과 같습니다.

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

samples : alias

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

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

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

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

source : alias

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

spread : alias

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

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

transparentBorder : alias

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

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

기본적으로 이 속성은 ` true`로 설정되어 있습니다. 소스 이미지에 이미 투명한 테두리가 있는 경우, 블러 처리 속도를 아주 약간 높이기 위해 이 속성을 `false`로 설정하십시오.

아래 코드 예시에서 왼쪽의 Rectangle은 투명한 테두리를 가지고 있어 가장자리가 흐릿하게 처리된 반면, 오른쪽의 Rectangle은 그렇지 않습니다.

import QtQuick
import Qt5Compat.GraphicalEffects

Rectangle {
    width: 180
    height: 100

    Row {
        anchors.centerIn: parent
        spacing: 16

        Rectangle {
            id: normalRect
            width: 60
            height: 60
            color: "black"
            radius: 10
            layer.enabled: true
            layer.effect: Glow {
                samples: 15
                color: "blue"
                transparentBorder: false
            }
        }

        Rectangle {
            id: transparentBorderRect
            width: 60
            height: 60
            color: "black"
            radius: 10
            layer.enabled: true
            layer.effect: Glow {
                samples: 15
                color: "blue"
                transparentBorder: true
            }
        }
    }
}