QML 图形渲染 - MaskedBlur

作者：billy
版权声明：著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处

属性介绍

• cached : alias
  使用缓存效果输出像素，可以提高渲染性能。每次更改源或效果属性时，都必须更新缓存中的像素。会增加内存消耗，因为存储效果输出需要额外的内存缓冲区。所以我们建议在源属性或效果属性设置动画时禁用缓存。默认为 false

• maskSource : alias
  控制模糊最终强度的项。maskSource 的像素 alpha 通道值定义将用于模糊相应源像素的实际模糊半径。不透明 maskSource 像素会产生具有指定半径的模糊，而透明像素会完全抑制模糊。半透明 maskSource 像素使用根据像素透明度级别插值的半径生成模糊

• radius : alias
  影响单个像素模糊的相邻像素的距离。较大的半径会增加模糊效果。根据半径值，样本值应设置为足够大，以确保视觉质量。该值的范围为 0.0（无模糊）到 inf。默认情况下，该值为 0.0（无模糊）

• samples : alias
  在完成模糊计算时每个像素采集的采样数。值越大，质量越好，但渲染速度越慢。理想情况下，该值应为所需最大半径值的两倍加 1。默认情况下，该值为 9。注意：此属性不触发动画。更改此属性可能会导致重新编译基础 OpenGL 着色器

• source : alias
  要模糊的源项。注意：不支持让效果包含自身

注意事项

1. MaskedBlur 支持 OpenGL 渲染
2. MaskedBlur 通过模糊图像来软化图像。可以使用 maskSource 控制每个像素的模糊强度，以使源的某些部分比其他部分更模糊
3. MaskedBlur 执行实时模糊是一项成本高昂的操作。在高端图形硬件上，即使采样数适中，全屏高斯模糊也只能以 60 fps 的速度运行

不同数值效果展示

官方示例

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
    }
    
    LinearGradient {
        id: mask
        anchors.fill: bug
        gradient: Gradient {
            GradientStop { position: 0.2; color: "#ffffffff" }
            GradientStop { position: 0.5; color: "#00ffffff" }
        }
        start: Qt.point(0, 0)
        end: Qt.point(300, 0)
        visible: false
    }
    
    MaskedBlur {
        anchors.fill: bug
        source: bug
        maskSource: mask
        radius: 16
        samples: 24
    }
}