Qt Quick 그래픽

그래픽 효과

1Blend

2Color 색상 효과

3Gradient 그래디언트 효과

4 섀도우 효과 DropShadow

5Blur 흐림 효과

6Glow 광선 효과

자신의 블로그에 있는 코드는https://github.com/xixihaha331/QT_Repository구문을 사용합니다.

1. 그래픽 효과

도형 효과 모듈을 사용하려면qml 파일에서 import QtGraphicalEffects 1.0 가져오기

Gradient              
Blend    
Color    
Distortion    
DropShadow    
Blur    
Glow    
OpacityMask    

1.1Blend

속성:
캐시 효과 출력 픽셀을 사용하여 렌더링 성능을 향상시킬 수 있습니다. 렌더링이 동적 대상이라면 이 속성을false로 설정하고 기본값은false로 설정하십시오.
foregroundSource가 원본 그림 위에 혼합된 프로젝트
source에서 혼합된 원본 프로젝트,foregroundSource 아래에서 기본 프로젝트로
모델 정의 혼합 모델: 22가지 다른 혼합 모델:normal;addition;average;color;colorBurn;colorDodge……..

1.2 Color 색상 효과

BrightnessContrast 밝기 대비 속성:
brightness 밝기의 증감량;cached;contrast;source
ColorOverlay 색상 중첩 속성:
cached는 렌더링 성능을 향상시키기 위해 캐시 효과 출력 픽셀을 허용합니다.소스 그림;color
Colorize 음영처리 속성:
hub 색조;lightness 밝기;saturation 포화도
Desaturate 포화도 Gamma Adjust 감마 조정 Hue Saturation 색상 포화도 Level Adjust 색계 조정

1.3 Gradient 그라데이션 효과

ConicalGradient 테이퍼 그래디언트 속성:
angle;gradient;horizontalOffset;source;verticalOffset
LinearGradient 선형 그래디언트 속성
start;gradient;end
RadialGradient 복사 그래디언트 속성:
원추형 점변 속성과 같다.horizontalRadius;verticalRadius;angle

1.4 섀도우 효과 DropShadow

DropShadow 투영 속성
cached;source;color;fast;horizontalOffset;radius;samples;spread;transparentBorder;verticalOffset
_InnerShadow 내부 섀도우 - 비슷한 속성

1.5Blur 흐림 효과

FastBlur 빠른 흐림 속성:
source;radius;transparentBorder
GaussianBlur 고스 모호 속성:
source;radius;transparentBorder;deviation
RecursiveBlur 반복 모호 속성:
source;radius;transparentBorder;progress;loops
MaskedBlur 매트 모호 속성:
source;radius;transparentBorder;maskSource
Motion Blur 역동감 흐림 효과 Directional Blur 방향 흐림 Radial Blur 레이디얼 흐림 Zoom Blur 축척 흐림

1.6 Glow 광선 효과

Glow 광선 특성:
fast;color;radius;samples;spread;transparentBorder RectangularGlow 사각형 광선

import QtQuick 2.8
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.1
import QtQuick.Dialogs 1.1
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
ApplicationWindow{
    id: win
    width:600
    height: 600
    Rectangle{
        id: rectangle
        height: win.height
        width:200

        Component{
            id: buttonstyle
            ButtonStyle {
                //background:Rectangle       
                background: Rectangle {
                    implicitWidth: 70
                    implicitHeight: 25
                    border.width: control.pressed ? 2 : 1
                    border.color: (control.pressed || control.hovered) ? "#00A060" : "#888888"
                    radius: 6
                    //gradient       ,                ,  control.pressed       
                    gradient: Gradient {
                        GradientStop { position: 0 ; color: control.pressed ? "#cccccc" : "#e0e0e0" }
                        GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
                    }
                }
            }
        }
        ToolBar{
            height: rectangle.height
            Column{
                //spacing: 50
                Button{
                    id: gradbutton
                    text: "Gradient"
                    style: buttonstyle
                    MouseArea{
                        anchors.fill: gradbutton
                        onClicked: {
                             grad.visible = true
                        }
                    }
                }
                Button{
                    text: "DropShadow"
                    style: buttonstyle
                    onClicked: {
                        dropshadow.visible = true
                    }
                }
                Button{
                    text: "Blur"
                    style: buttonstyle
                    onClicked: {
                        fastblur.visible = true
                    }
                }
                Button{
                    text: "Glow"
                    style: buttonstyle
                    onClicked: {
                         glow.visible = true
                    }
                }
                Button{
                    text: "back"
                    style: buttonstyle
                    onClicked: {
                         glow.visible = false
                        fastblur.visible = false
                        dropshadow.visible = false
                    }
                }
            }
        }
    }
    menuBar: MenuBar{
        Menu{
            id:openmenu
            title: "open"
            MenuItem{
                id: file
                text: "file"
            }
        }
        Menu{
            id: editmenu
            title: "edit"
            MenuItem{
                text: "edit"
            }
        }
        Menu{
            id: helpmenu
            title: "help"
            MenuItem{
                text: "help"
            }
        }
    }
    Image {
        id: butterfly
        source: "images/butterfly.png"
        anchors.left: rectangle.right
    }
    Glow{
        visible: false
        id: glow
        anchors.fill: butterfly
        source: butterfly
        radius:16
        samples: 24
        color: "red"
        spread: 0.5
    }
    LinearGradient{
        id:grad
        visible: false
        anchors.fill: butterfly
        source: butterfly
        start: Qt.point(100,100)
        end:Qt.point(300,300)
        gradient: Gradient{
            GradientStop{
                   position: 0.0;
                   color: "white"
               }
            GradientStop{
                   position: 1.0;
                   color: "black"
            }
        }
    }
    DropShadow{
        id:dropshadow
        visible: false
        anchors.fill: butterfly
        source: butterfly
        horizontalOffset: 4
        verticalOffset: 4
        radius: 8.0
        samples: 16
        color: "#80000000"
    }
    FastBlur{
        id: fastblur
        visible: false
        anchors.fill: butterfly
        source: butterfly
        radius: 32
   }

}