Qt Quick图形效果

自己博客中的代码可以在https://github.com/xixihaha331/QT_Repository中获取

1.图形效果

使用图形效果模块,要在.qml文件中导入
import QtGraphicalEffects 1.0

Gradient 定义一个两种颜色的渐变过程
Blend混合效果
Color颜色效果
Distortion变形效果
DropShadow阴影效果
Blur模糊效果
Glow发光效果
OpacityMask遮罩效果

1.1Blend

属性:

cached允许缓存特效输出像素提高渲染性能,如果渲染是动态的对象,建议将该属性设置为false,默认值为false

foregroundSource在源图片之上进行混合的项目

source进行混合的源项目,在foregroundSource下面作为基项目

mode定义混合模型:
有22种不同的混合模型:normal;addition;average;color;colorBurn;colorDodge……..

1.2Color颜色效果

BrightnessContrast亮度对比度
属性:

brightness亮度的增减量;cached;contrast;source

ColorOverlay颜色叠加
属性:

cached允许缓存特效输出像素来提高渲染性能;source源图片;color

Colorize着色
属性:

hub色调;lightness亮度;saturation饱和度

Desaturate饱和度
GammaAdjust伽玛调整
HueSaturation色相饱和度
LevelAdjust色阶调整

1.3Gradient渐变效果

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动感模糊效果
DirectionalBlur方向模糊
RadialBlur径向模糊
ZoomBlur缩放模糊

1.6Glow发光效果

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
   }

}