QML Graphics Rendering - Glow

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

• cached : alias
  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

• color : alias
  RGBA color value for glow. By default, this property is "white"

• radius : alias
  The radius defines the softness of the halo. The larger the radius, the blurrier the edges of the halo. Depending on the radius value, the sample value should be set large enough to ensure visual quality. The ideal blur is achieved by choosing the sampling and radius, i.e.samples = 1 + radius * 2. By default, the value is floor(samples/2)

• samples : alias
  The number of samples taken per pixel when completing the blur calculation. Higher values ​​result in better quality but slower rendering. By default, the value is 9. Note: This property does not trigger animations. Changing this property may cause the underlying OpenGL shader to be recompiled

• source: alias
  The source term for the generated halo source. Note: Allowing the effect to contain itself is not supported

• spread : alias
  Much of the enhancement of the halo color near the source edge. Values ​​range from 0.0 to 1.0. By default, this property is set to 0.5. Notice:The implementation is optimized for medium and low permutation values. Depending on the source, a permutation value close to 1.0 may produce visually asymmetric results

• transparentBorder : aliases
  Determines if the effect has a transparent border. When set to true, the outside of the item will be filled with transparent edges, causing samples outside the source texture to use transparency instead of edge pixels. Without this property, images with opaque edges will not get blurred edges. By default, this property is set to true. If the source already has transparent edges, set this to false to make the blur a little faster

Precautions

1. Glow supports OpenGL rendering
2. The Glow effect blurs the source's alpha channel, tints it with a color, and places it behind the source, creating a halo around the object
3. Glow is created by blurring images in real time using Gaussian blur. Performing real-time blurring is an expensive operation. On high-end graphics hardware, full-screen Gaussian blur can only run at 60 fps, even with moderate samples

Display of different numerical effects

Official example

import QtQuick 2.12
import QtGraphicalEffects 1.12

Item {
    width: 300
    height: 300
    
    Rectangle {
        anchors.fill: parent
        color: "black"
    }
    
    Image {
        id: butterfly
        source: "images/butterfly.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }
    
    Glow {
        anchors.fill: butterfly
        radius: 8
        samples: 17
        color: "white"
        source: butterfly
    }
}