QML Graphics Rendering - HueSaturation

Author: billy
Copyright statement: The copyright belongs to the author, please contact the author for commercial reprinting, please indicate the source for non-commercial reprinting

Attribute introduction

1. cached : bool
   Output pixels using cache effects, which can improve rendering performance. Every time a source or effect property is changed, the pixels in the cache must be updated. Will increase memory consumption as additional memory buffers are required to store the effect output. So we recommend disabling caching when animating source properties or effect properties. Default is false

2. hue : real
   The hue value added to the source hue value. The value ranges from -1.0 (decrease) to 1.0 (increase). By default, the value is 0.0 (no change)

3. lightness : real
   Luminance value added to the source saturation value. The value ranges from -1.0 (decrease) to 1.0 (increase). By default, the value is 0.0 (no change)

4. saturation : real
   The saturation value added to the source saturation value. The value ranges from -1.0 (decrease) to 1.0 (increase). By default, the value is 0.0 (no change)

5. source : variant
   The source item that provides the source pixel for the effect. Note: Allowing the effect to contain itself is not supported

Precautions

1. HueSaturation supports OpenGL rendering
2. HueSaturation is similar to a shading effect, but the Hue and Saturation property values ​​are handled differently. The HueSaturation effect always moves the hue, saturation, and lightness from the original, rather than setting them

Display of different numerical effects

Official example

import QtQuick 2.12
import QtGraphicalEffects 1.12

Item {
    width: 300
    height: 300
    
    Image {
        id: bug
        source: "images/bug.jpg"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }
    
    HueSaturation {
        anchors.fill: bug
        source: bug
        hue: -0.3
        saturation: 0.5
        lightness: -0.1
    }
}