예제를 통해 각 효과를 확인해 보도록 하자.
우선, 예제에 사용된 이미지는 다음과 같이 제트기, 아이스크림, 체크무늬 이미지이다.

jeticecreamchecker

 
Blend
제트기 이미지와 아이스크림 이미지를 사용하여 blend 효과를 적용해 보겠다.

[code language=”cpp”] /* Blend – Merges two source items by using a blend mode. */
Item {
width: 200
height: 200

Image {
id: jet
source: ‘jet.png’
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}

Image {
id: icecream
source: ‘icecream.png’
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}

Blend {
anchors.fill: jet
source: jet // source item
foregroundSource: icecream // source item 위에 합칠 item
mode: ‘subtract’ // source 와 foregroundSource 가 합쳐지는 형식
}
}[/code]

실행해 보면, 제트기 위에 아이스크림 이미지가 합쳐진 결과가 나온다. 설정한 mode 에 따라 어떻게 합칠 것인지 즉, 어떤식으로 blend 할 것인지 결정되는데 그 모드의 종류에 대해서는 설명하지 않겠다. 어떠한 종류가 있는지만 나열하고 그것에 대한 자세한 설명은 포토샵 관련하여 검색해보면 얻을 수 있다.
– mode 종류: normal, addition, average, color, colorBurn, colorDodge, darken, darkerColor, difference, divide, exclusion, hardLight, hue, lighten, lighterColor, lightness, multiply, negation, saturation, screen, subtract, softLight.

GraphicalEffect_Blend_01

 
BrightnessContrast
아래 소스와 같이 밝기와 대비를 조정하면 제트기 이미지가 더 환해지고 색상 대비가 뚜렷해진 것을 확인할 수 있다.

[code language=”cpp”] /* BrightnessContrast – Adjusts brightness and contrast. */
Item {
width: 200
height: 200

Image {
id: jet2
source: ‘jet.png’
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}

BrightnessContrast {
anchors.fill: jet2
source: jet2
brightness: 0.5 // 밝기
contrast: 0.5 // 대비. 범위: -1.0 ~ 1.0(default: 0.0)
}
}[/code]

GraphicalEffect_BrightnessContrast_01

 
ColorOverlay
제트기 이미지에 RGBA 형식으로 ‘#8000ff00’ 이라는 색상을 덮어씌운다.

[code language=”cpp”] /* ColorOverlay – Alters the colors of the source item by applying an overlay color. */
Item {
width: 200
height: 200

Image {
id: jet3
source: ‘jet.png’
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}

ColorOverlay {
anchors.fill: jet3
source: jet3
color: ‘#8000ff00’ // 덮어쓸 색상 (RGBA 형식)
}
}[/code] 제트기 이미지가 초록빛으로 덮어씌어진 것을 확인할 수 있다.
GraphicalEffect_ColorOverlay_01

 
Colorize
HSL color 영역을 이용하여 색상을 설정한다. 아래 예제소스와 같이 색조(H), 채도(S), 명도(L)를 설정하여 실행해보면 제트기 이미지의 색상이 변한것을 확인할 수 있다.

[code language=”cpp”] /* Colorize – Sets the color in the HSL color space. */
Item {
width: 200
height: 200

Image {
id: jet4
source: ‘jet.png’
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}

Colorize {
anchors.fill: jet4
source: jet4
hue: 0.0 // 색조
saturation: 0.5 // 채도
lightness: -0.2 // 명도(밝기)
}
}[/code]

GraphicalEffect_Colorize_01

 
Desaturate
채도를 감소시킨다.

[code language=”cpp”] /* Desaturate – Reduces the saturation of the colors. */
Item {
width: 200
height: 200

Image {
id: jet5
source: ‘jet.png’
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}

Desaturate {
anchors.fill: jet5
source: jet5
desaturation: 0.8 // 감소시킬 채도의 양. 범위: 0.0 ~ 1.0
}
}[/code]

GraphicalEffect_Desaturate_01

 
GammaAdjust
감마값을 변경한다.

[code language=”cpp”] /* GammaAdjust – Alters the luminance of the source item. */
Item {
width: 200
height: 200

Image {
id: jet6
source: ‘jet.png’
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}

GammaAdjust {
anchors.fill: jet6
source: jet6
gamma: 0.45 // 감마
}
}[/code]

GraphicalEffect_GammaAdjust_01

 
HueSaturation
Colorize 와 비슷하지만 조절방식이 다르다. 절대값이 아닌 상대값으로 설정한다. 따라서 원본 이미지를 기준으로 이동시키고 싶은 만큼의 HSL 값을 넣어야 한다.

[code language=”cpp”] /* HueSaturation – Alters the source item colors in the HSL color space. */
Item {
width: 200
height: 200

Image {
id: jet7
source: ‘jet.png’
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}

HueSaturation {
anchors.fill: jet7
source: jet7
hue: -0.3 // 색조
saturation: 0.5 // 채도
lightness: -0.1 // 밝기
}
}[/code]

GraphicalEffect_HueSaturation_01

 
ConicalGradient
아이스크림 이미지에 원뿐모양의 graident 를 적용시키는 예제이다. Gradient 시작 각도과 중심점을 설정할 수 있다.

[code language=”cpp”] /* ConicalGradient – Draws a conical gradient. */
Item {
width: 200
height: 200

Image {
id: icecream9
source: ‘icecream.png’
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}

ConicalGradient {
anchors.fill: parent
source: icecream9
angle: 45.0 // gradient 시작 각
gradient: Gradient { // 2가지 색 이상 설정 필요
GradientStop { position: 0.0; color: "white" }
GradientStop { position: 1.0; color: "black" }
}
horizontalOffset: -10 // 수평상의 gradient 중심점
verticalOffset: 15 // 수직상의 gradient 중심점
}
}[/code]

GraphicalEffect_ConicalGradient_01

 
OpacityMask
아이스크림 이미지에 체크무늬 이미지를 mask 처리하는 예제이다. Mask 는 질감이나 색상을 찍어내는 것이라고 이해를 하면 쉽다.

[code language=”cpp”] /* OpacityMask – Masks the source item with another item. */
Item {
width: 200
height: 200

Image {
id: checker
source: ‘checker.png’
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
anchors.fill: parent
}

Image {
id: mask26
source: ‘icecream.png’
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
anchors.fill: parent
}

OpacityMask {
anchors.fill: parent
source: checker
maskSource: mask26 // mask 처리에 사용할 source item
}
}[/code] 예제를 실행하면 아이스크림 이미지에 체크무늬 이미지를 찍어내니까 아래와 같이 체크무늬 아이스크림 이미지가 만들어진다.
GraphicalEffect_OpacityMask_01