图形效果 1Blend2Color颜色效果3Gradient渐变效果4阴影效果DropShadow5Blur模糊效果6Glow发光效果

自己博客中的代码可以在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 } }