QML使用专门的特效元素来实现图像亮度、对比度、色彩饱和度等特殊处理，这些特效元素也像基本的QML元素一样可以以UI组件的形式添加到Qt Quick用户界面上。
本文实例实现单击图像使其亮度变暗，且对比度增强，运行效果如下图所示。
实现步骤如下。
(1) 新建项目
新建QML应用程序，项目名称为“GraphEffects”。
(2)准备图片
在项目工程目录中建一个images文件夹，其中放入一幅图像“insect.gif”。右击项目视图“资源”一“qml.qrc”下的“/”节点，选择“Add Existing Files...”项，从弹出的对话框中选择该图像并打开，将其加载到项目中。
(3)自定义组件
右击项目视图“资源”一“qml.qrc”下的“/”节点，选择“Add New...”，新建“MyGraph.qml”文件，编写代码如下：
import QtQuick 2.0
import QtGraphicalEffects 1.0 // (a)
Rectangle {//矩形作为图像显示区
width: animg.width
height: animg.height
AnimatedImage { //显示GIF图像元素
id: animg
source: "images/insect.gif" //图像路径
}
BrightnessContrast { //(b)
id: bright
anchors.fill: animg
source: animg
}
SequentialAnimation { //定义串行组合动画
id: imgAnim
NumberAnimation { //用动画调整亮度
target: bright
property: "brightness" //(c)
to: -0.5 //变暗
duration: 3000
}
NumberAnimation { //用动画设置对比度
target: bright
property: "contrast" //(d)
to: 0.25 //对比度增强
duration: 2000
}
}
MouseArea {
anchors.fill: parent
onClicked: {
imgAnim.running = true //单击图像开启动画
}
}
}其中，
- (a) import QtGraphicalEffects 1.0: QML的图形特效元素类型都包含在QtGraphicalEffects 库中，编程时需要使用该模块处理图像，都要在QML文档开头写上这一句声明，以导入特效元素库。
- (b) BrightnessContrast{...}: BrightnessContrast是一个特效元素，功能是设置源元素的亮度和对比度。它有一个属性source指明了其源元素，源元素一般都是一个Image或AnimatedImage 类型的图像。
- (c) property: "brightness": brightness是BrightnessContrast元素的属性，用于设置源元素的亮度，由最暗到最亮对应的取值范围为-1.0?1.0,默认值为0.0 (对应图像的本来亮度）。本例用动画渐变到目标值-0.5,在视觉上呈现较暗的效果。
- (d) property: "contrast"：contrast也是BrightnessContrast元素的属性，用于设置源元素的对比度，由最弱到最强对应的取值范围为-1.0?1.0,默认值为0.0 (对应图像本来的对比度)。0.0?-1.0的对比度是线性递减的，而0.0?1.0的对比度则呈非线性增强，且越接近1.0,增加曲线越陡峭，以致达到很高的对比效果。本例用动画将对比度逐渐调节到0.25,视觉上能十分清晰地显示出花蕾上的昆虫。
(4)主程序
打开“main.qml”文件，修改代码如下：
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 400
height: 290
title: qsTr("GraphEffects")
Rectangle {
anchors.fill: parent
MouseArea {
id: mouseArea
anchors.fill: parent
}
MyGraph {
anchors.centerIn: parent
} //使用组件
}
}QML的QtGraphicalEffects库还可以实现图像由彩色变黑白、加阴影、模糊处理等各种特效。限于篇幅，本文不展开，有兴趣的同学请参考Qt官方网站提供的文档。
————————————————
觉得有用的话请关注点赞，谢谢您的支持！
对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！
