Glow QML Type

生成光源的模糊彩色图像,并将其置于原始图像之后,使人感觉光源在发光。更多

Import Statement: import Qt5Compat.GraphicalEffects
Since: QtGraphicalEffects 1.0
Inherits:

Item

属性

详细说明

来源应用的效果

示例

下面的示例展示了如何应用效果。

import QtQuick
import Qt5Compat.GraphicalEffects

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
        color: "white"
        source: butterfly
    }
}

属性文档

cached : alias

此属性允许缓存效果输出像素,以提高渲染性能。

每次更改源或效果属性时,都必须更新缓存中的像素。由于需要额外的内存缓冲区来存储效果输出,因此会增加内存消耗。

建议在动画源或特效属性时禁用缓存。

默认情况下,该属性设置为false


color : alias

该属性定义了用于辉光的 RGBA 颜色值。

默认情况下,该属性设置为"white"

不同颜色值的输出示例

color:#ffffff color:#00ff00 color:#aa00ff00
radius: 8radius: 8radius: 8
samples:17samples:17samples:17
spread:0.5spread:0.5spread:0.5

radius : alias

半径定义辉光的柔和度。半径越大,光晕的边缘越模糊。

根据半径值,samples 的值应设置得足够大,以确保视觉质量。

理想的模糊效果可以通过选择samplesradius 来实现,这样samples = 1 + radius * 2 ,如图所示:

半径样本
0(无模糊)1
13
25
37

默认情况下,该属性设置为floor(samples/2)

不同半径值的输出示例

半径: 0 半径: 6 半径:12
samples: 25samples: 25samples: 25
color:#ffffffcolor:#ffffffcolor:#ffffff
spread:0spread:0spread:0

samples : alias

此属性定义边缘柔化模糊计算时每个像素取样的数量。数值越大,质量越好,但渲染速度越慢。

理想情况下,该值应是所需最高半径值加一的两倍,例如

半径样本
0(无模糊)1
13
25
37

默认情况下,该属性设置为9

该属性不用于动画。更改此属性将导致重新编译底层 OpenGL 着色器。


source : alias

该属性定义了将用作生成辉光源的源项。

注意: 不支持让效果包含自身,例如将源设置为效果的父级。


spread : alias

该属性定义了光晕颜色在源边缘附近的强化程度。

数值范围为 0.0 至 1.0。默认情况下,该属性设置为0.5

注: 已针对中、低扩散值进行了优化。根据光源的不同,接近 1.0 的扩散值可能会产生视觉上不对称的结果。

不同传播值的输出示例

传播:0.0 传播:0.5 传播:1.0
radius: 8radius: 8radius: 8
samples:17samples:17samples:17
color:#ffffffcolor:#ffffffcolor:#ffffffff

transparentBorder : alias

此属性决定效果是否有透明边框。

当设置为true 时,项目的外部将填充透明边缘,使源纹理外部的采样使用透明度而不是边缘像素。如果没有此属性,边缘不透明的图像将不会获得模糊边缘。

默认情况下,该属性设置为true 。如果源图像已经有了透明边缘,则将其设置为 false,这样模糊效果会更快一些。

在下面的代码段中,左边的矩形有透明的边框和模糊的边缘,而右边的矩形没有。

import QtQuick
import Qt5Compat.GraphicalEffects

Rectangle {
    width: 180
    height: 100

    Row {
        anchors.centerIn: parent
        spacing: 16

        Rectangle {
            id: normalRect
            width: 60
            height: 60
            color: "black"
            radius: 10
            layer.enabled: true
            layer.effect: Glow {
                samples: 15
                color: "blue"
                transparentBorder: false
            }
        }

        Rectangle {
            id: transparentBorderRect
            width: 60
            height: 60
            color: "black"
            radius: 10
            layer.enabled: true
            layer.effect: Glow {
                samples: 15
                color: "blue"
                transparentBorder: true
            }
        }
    }
}


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.