QML Graphics Rendering - ThresholdMask

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 : 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

• maskSource : option
  item to use as mask. The mask item is rendered into an intermediate pixel buffer, and the alpha value in the result is used to determine the pixel visibility of the source item in the display.
  Note: Allowing the effect to contain itself is not supported

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

• spread : real
  The smoothness of the edges of the mask close to the "threshold alpha" value. Setting spread to 0.0 normally uses a mask with a specified threshold. Setting a higher spread value softens the transition from transparent to opaque masked pixels by adding an interpolation between transparent and opaque masked pixels. The value ranges from 0.0 (sharpening the edges of the mask) to 1.0 (smoothing the edges of the mask). By default, this property is set to 0.0

• threshold : real
  Threshold for mask pixels. Mask pixels with an alpha value lower than this property are used to completely mask the corresponding pixels of the source item. Mask pixels with higher alpha values ​​are used to alpha blend the source item with the display. This value ranges from 0.0 (alpha value 0) to 1.0 (alpha value 255). By default, this property is set to 0.0

Precautions

1. ThresholdMask supports OpenGL rendering
2. ThresholdMask can use the threshold of mask pixels to control mask behavior

Display of different numerical effects

Official example

import QtQuick 2.12
import QtGraphicalEffects 1.12

Item {
    width: 300
    height: 300
    
    Image {
        id: background
        anchors.fill: parent
        source: "images/checker.png"
        smooth: true
        fillMode: Image.Tile
    }
    
    Image {
        id: bug
        source: "images/bug.jpg"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }
    
    Image {
        id: mask
        source: "images/fog.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }
    
    ThresholdMask {
        anchors.fill: bug
        source: bug
        maskSource: mask
        threshold: 0.4
        spread: 0.2
    }
}