QML 颜色效果-CSDN博客

本文链接：https://blog.csdn.net/qq_44729609/article/details/149473275

亮度与对比度调整（BrightnessContrast）

BrightnessContrast效果允许开发者调整元素的亮度和对比度，是图像处理中最基础也最常用的效果之一。

核心属性

属性	类型	默认值	描述
`source`	variant	必需	应用效果的源项
`brightness`	real	0.0	亮度调整值（-1.0到1.0）
`contrast`	real	0.0	对比度调整值（-1.0到1.0）
`cached`	bool	false	是否缓存效果输出以提升性能

brightness属性控制图像的明暗程度：正值增加亮度，负值降低亮度。contrast属性控制图像对比度：正值增加对比度，负值降低对比度。

应用示例

基础亮度调整：

import QtQuick 2.15
import QtGraphicalEffects 1.15

Image {
    id: sourceImage
    source: "image.png"
    visible: false
}

BrightnessContrast {
    anchors.fill: sourceImage
    source: sourceImage
    brightness: 0.5 // 提高亮度
    contrast: 0.1 // 轻微增加对比度
}

动态亮度对比度调整（可用于图片编辑应用）：

Row {
    spacing: 20
    
    Slider {
        id: brightnessSlider
        width: 200
        from: -1.0
        to: 1.0
        value: 0.0
    }
    
    Slider {
        id: contrastSlider
        width: 200
        from: -1.0
        to: 1.0
        value: 0.0
    }
    
    BrightnessContrast {
        source: sourceImage
        brightness: brightnessSlider.value
        contrast: contrastSlider.value
    }
}

BrightnessContrast效果特别适合用于：

图像编辑应用中的亮度/对比度调整功能
根据环境光线自动调整界面明暗
创建特殊视觉效果（如夜间模式）
修正曝光不足或过度的图片

颜色叠加（ColorOverlay）

ColorOverlay效果可以在源项上叠加一层指定的颜色，实现类似滤镜的效果，是UI设计中常用的技术。

核心属性

属性	类型	默认值	描述
`source`	variant	必需	应用效果的源项
`color`	color	"white"	叠加的颜色值
`cached`	bool	false	是否缓存效果输出

color属性支持所有QML颜色表示法，包括颜色名称、十六进制、RGB、HSL等。通过alpha通道可以控制叠加的强度。

应用示例

基础颜色叠加：

import QtQuick 2.15
import QtGraphicalEffects 1.15

Image {
    id: originalImage
    source: "icon.png"
    visible: false
}

ColorOverlay {
    anchors.fill: originalImage
    source: originalImage
    color: "#8000ff00" // 半透明绿色叠加
}

按钮状态颜色变化：

Button {
    id: myButton
    text: "Submit"
    width: 120
    height: 40
}

ColorOverlay {
    anchors.fill: myButton
    source: myButton
    color: myButton.down ? "#60ff0000" : "#6000ff00"
}

多图统一色调（适用于图标集）：

Grid {
    columns: 3
    spacing: 10
    
    Repeater {
        model: 6
        delegate: ColorOverlay {
            width: 48; height: 48
            source: Image { source: "icon" + index + ".png"; visible: false }
            color: "#3498db" // 统一蓝色调
        }
    }
}

ColorOverlay常用于：

为图标集应用统一品牌色
实现按钮的按下状态效果
创建彩色图标变体
图像着色而不修改原始资源

着色效果（Colorize）

Colorize效果可以将图像转换为单色调图像，同时保留原始图像的亮度和细节。

核心属性

属性	类型	默认值	描述
`source`	variant	必需	应用效果的源项
`hue`	real	0.0	色调值（0.0-1.0）
`saturation`	real	1.0	饱和度值（0.0-1.0）
`lightness`	real	0.0	亮度调整（-1.0到1.0）
`cached`	bool	false	是否缓存效果输出

hue属性使用HSL色彩空间的色调值，0.0和1.0都表示红色，中间值表示其他色调。saturation控制颜色强度，0.0为灰度，1.0为完全饱和。

应用示例

基础着色效果：

import QtQuick 2.15
import QtGraphicalEffects 1.15

Image {
    id: sourceImage
    source: "portrait.jpg"
    visible: false
}

Colorize {
    anchors.fill: sourceImage
    source: sourceImage
    hue: 0.6 // 蓝色调
    saturation: 0.8
    lightness: -0.1
}

动态色调选择器：

Column {
    Slider {
        id: hueSlider
        width: 200
        from: 0.0
        to: 1.0
        value: 0.0
    }
    
    Colorize {
        source: sourceImage
        hue: hueSlider.value
        saturation: 1.0
    }
}

复古照片效果：

Colorize {
    source: oldPhoto
    hue: 0.1 // 棕色调
    saturation: 0.5
    lightness: -0.2
}

Colorize效果适合用于：

创建单色调风格UI
实现主题颜色切换
照片艺术效果处理
产品图片颜色变体展示

饱和度调整（Desaturate）

Desaturate效果可以降低图像的饱和度，创建灰度或部分去色的效果。

核心属性

属性	类型	默认值	描述
`source`	variant	必需	应用效果的源项
`desaturation`	real	0.0	去色程度（0.0-1.0）
`cached`	bool	false	是否缓存效果输出

desaturation值为0.0时保持原色，1.0时完全去色变为灰度图像。

应用示例

基础去色效果：

import QtQuick 2.15
import QtGraphicalEffects 1.15

Image {
    id: colorfulImage
    source: "landscape.jpg"
    visible: false
}

Desaturate {
    anchors.fill: colorfulImage
    source: colorfulImage
    desaturation: 0.8 // 80%去色
}

禁用状态效果：

Button {
    id: btn
    text: "Disabled"
    enabled: false
}

Desaturate {
    anchors.fill: btn
    source: btn
    desaturation: btn.enabled ? 0.0 : 1.0
}

Desaturate常用于：

创建禁用状态UI效果
设计焦点/非焦点状态转换
实现艺术化图像效果
突出显示选中项（通过降低非选中项饱和度）

伽玛调整（GammaAdjust）

GammaAdjust效果通过伽玛曲线调整图像亮度，能够更自然地调整图像明暗。

核心属性

属性	类型	默认值	描述
`source`	variant	必需	应用效果的源项
`gamma`	real	1.0	伽玛值（大于0的值）
`cached`	bool	false	是否缓存效果输出

gamma值小于1.0会使图像变亮，大于1.0会使图像变暗。与Brightness不同，Gamma调整更符合人眼对光线的感知。

应用示例

基础伽玛调整：

import QtQuick 2.15
import QtGraphicalEffects 1.15

Image {
    id: srcImage
    source: "photo.jpg"
    visible: false
}

GammaAdjust {
    anchors.fill: srcImage
    source: srcImage
    gamma: 1.8 // 变暗
}

GammaAdjust适合用于：

显示设备色彩校正
适应不同光照条件下的显示
照片后期处理
HDR效果实现

色相与饱和度调整（HueSaturation）

HueSaturation效果允许独立调整图像的色相、饱和度和亮度，提供更灵活的颜色控制。

核心属性

属性	类型	默认值	描述
`source`	variant	必需	应用效果的源项
`hue`	real	0.0	色相调整（-1.0到1.0，对应-180°到180°）
`saturation`	real	0.0	饱和度调整（-1.0到1.0）
`lightness`	real	0.0	亮度调整（-1.0到1.0）
`cached`	bool	false	是否缓存效果输出

hue属性调整色相，saturation调整颜色强度，lightness调整明暗。

应用示例

基础色相旋转：

import QtQuick 2.15
import QtGraphicalEffects 1.15

Image {
    id: origImage
    source: "object.png"
    visible: false
}

HueSaturation {
    anchors.fill: origImage
    source: origImage
    hue: 0.5 // 90°色相旋转
    saturation: 0.2
}

HueSaturation效果适合用于：

图像编辑应用中的HSL调整
主题颜色动态变化
艺术效果创作
产品多配色展示

色阶调整（LevelAdjust）

LevelAdjust效果提供专业的色阶调整功能，可以分别调整图像的最小输入/输出、中点和最大输入/输出值。

核心属性

属性	类型	默认值	描述
`source`	variant	必需	应用效果的源项
`minimumInput`	color	"#00000000"	最小输入色阶
`maximumInput`	color	"#ffffffff"	最大输入色阶
`minimumOutput`	color	"#00000000"	最小输出色阶
`maximumOutput`	color	"#ffffffff"	最大输出色阶
`cached`	bool	false	是否缓存效果输出

这些属性允许对图像进行专业的色阶调整，类似于Photoshop中的色阶功能。

应用示例

基础色阶调整：

import QtQuick 2.15
import QtGraphicalEffects 1.15

Image {
    id: inputImage
    source: "photo.jpg"
    visible: false
}

LevelAdjust {
    anchors.fill: inputImage
    source: inputImage
    minimumInput: "#000000" // 黑点
    maximumInput: "#ffffff" // 白点
    minimumOutput: "#111111" // 提升黑点
    maximumOutput: "#eeeeee" // 降低白点
}

对比度增强：

LevelAdjust {
    source: lowContrastImage
    minimumInput: "#222222"
    maximumInput: "#dddddd"
    minimumOutput: "#000000"
    maximumOutput: "#ffffff"
}

LevelAdjust适合用于：