Qt Quick里的图形效果——颜色（Color）

最新推荐文章于 2025-07-20 00:50:34 发布

原创

最新推荐文章于 2025-07-20 00:50:34 发布 · 1.6w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#QML #Qt Quick #图像混合 #Graphical Effects

本文深入探讨Qt Quick中的颜色效果元素，包括BrightnessContrast和LevelAdjust。通过示例ColorExample.qml，展示了如何调整亮度、对比度以及使用gamma曲线改变颜色水平，帮助读者理解并应用这些图形效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Qt Quick提供了通过改变一个 Item 的颜色来产生各种各样效果的元素。有下面几种：

BrightnessContrast，调整亮度和对比度
ColorOverlay，在源 Item 上覆盖一层颜色
Colorize，设置源 Item 的 HSL 颜色空间
Desaturate，降低颜色的饱和度
GammaAdjust，使用 gamma 曲线来改变源 Item 的照度
HueSaturation，在 HSL 颜色空间改变源 Item 的颜色
LevelAdjust，在 RGBA 颜色空间调整源 Item 的颜色水平

因为有多种颜色效果，每种又支持不同的、可调整的属性，所以在设计示例时和上次讲的 Blend 又有不同。

ColorExample示例介绍

我设计了一个示例： ColorExample.qml 。这个 QML 文档与 BlendExample 一样，都被加入到 GraphicalEffects 项目中的 qrc 中。使用到的图片 bug.jpg 和 butterfly.png 也在 qrc 中。

看一下效果：

图 1 颜色效果示例

如图 1 所示，界面分三个部分，与 Blend 示例类似。上方是原始图片，下方左侧是颜色效果类型列表，下方右侧用来展示某个效果类型的用法和效果。

如你所见，右下方白色背景那部分，会根据 Color Effects 列表中的条目而变化，是动态加载的，在代码中通过 Loader 来动态加载某个效果对应的 qml 文档。

到现在为止，我们的示例中的 qml 文档，已经分了三层：

main.qml 构造最外层的示例框架
ColorExample.qml 实现颜色效果的框架
BrightnessContrastEx.qml 之类 qml 文档展示某个特定的颜色效果类的用法

颜色效果元素

颜色效果种类太多了，我真想说：看 Qt 帮助去吧。可这太不负责任了不是，所以我决定还是挑一个来讲一下，就挑 BrightnessContrast 吧，它不是最简单的，也不是复杂的。

与 Blend 类似的是，各种颜色效果元素操作 source 的结果是产生一个新的 Item 。不同的是，颜色效果元素只有一个 source 属性，没有 foregroundSource 属性，即：它只需要一个源 Item ，通过改变源 Item 的颜色来产生图形效果。

BrightnessContrast

看名字就知道了，这个元素是改变亮度和对比度的，所以它有两个属性， brightness 和 contrast ，分别改变源 Item （通过 source 属性指定）的亮度和对比度；它们的取值范围都是 -1.0 ~ 1.0 ，默认值都是 0.0 。

另外还有一个 cached 属性，介绍 Blend 时已经提到了，设置为 true 可以缓存处理后的图像，提高渲染速度。默认值为 false 。

每一个颜色效果的示例我都在一个单独的 qml 文档中实现，当用户点击图 1 中的颜色效果列表时，通过改变 Loader 的 source 属性来动态加载对应的 QML 文档。 BrightnessContrast 对应的 qml 文档是 BrightnessContrastEx.qml ，内容如下：

import QtQuick 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.2

Rectangle {
    anchors.fill: parent;
    Image {
        id: opImage;
        x: 4;
        y: 4;
        width: 250;
        height: 250;
        source: "bug.jpg";
        sourceSize: Qt.size(250, 250);
        smooth: true;
        visible: false;
    }

    BrightnessContrast {
        anchors.fill: opImage;
        source: opImage;
        brightness: bslider.value;
        contrast: cslider.value;
    }
    Text {
        id: blabel;
        text: "Brightness:";
        anchors.left: opImage.left;
        anchors.top: opImage.bottom;
        anchors.margins: 4;
    }

    Slider {
        id: bslider;
        anchors.left: blabel.right;
        anchors.leftMargin: 8;
        anchors.verticalCenter: blabel.verticalCenter;
        width: 200;
        height: 40;
        minimumValue: -1.0;
        value: 0.5;
    }
    Text {
        id: clabel;
        text: "Contrast:";
        anchors.left: blabel.left;
        anchors.top: bslider.bottom;
        anchors.topMargin: 4;
    }

    Slider {
        id: cslider;
        anchors.left: bslide