QML Graphics Rendering - RadialBlur

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

• angle : real
  Define the direction of blur, and at the same time define the level of blur. The larger the angle, the blurrier the result. The quality of the blur depends on the Sampling property. If the angle value is larger, more samples are required to maintain high visual quality. Allowed values ​​are between 0.0 and 360.0. By default, this property is set to 0.0

• 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

• horizontalOffset : real
  Offset of rotation center point (in pixels). Allowed values ​​are between -inf and inf. By default, this property is set to 0

• samples : int
  The number of samples taken per pixel when completing the blur calculation. Higher values ​​result in better quality but slower rendering. This property does not trigger animations. Changing this property may cause the underlying OpenGL shader to be recompiled. Allowed values ​​are between 0 and inf (the actual maximum value depends on the GPU). By default, this property is set to 0 (no samples)

• source : variant
  source item to obfuscate. Note: Allowing the effect to contain itself is not supported

• transparentBorder : bool
  Blur behavior near item edges, where pixel blur is affected by pixels outside the source edge. If this property is set to true, pixels outside the source will be interpreted as transparent, similar to OpenGL clamp-to-border extension. The blur spreads out slightly outside the effect item area. If this property is set to false, pixels outside the source will be interpreted as containing the same color as the item's edge pixels, similar to OpenGL's clamp-to-edge behavior. Blur does not expand outside the effect item area. By default, this property is set to false

• verticalOffset : real
  Offset of rotation center point (in pixels). Allowed values ​​are between -inf and inf. By default, this property is set to 0

Precautions

1. RadialBlur supports OpenGL rendering
2. RadialBlur creates the perceptual impression that the source item appears to be rotating in a blurred direction

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
    }
    
    RadialBlur {
        anchors.fill: bug
        source: bug
        samples: 24
        angle: 30
    }
}