矩形渐变 QML 类型
生成一个模糊着彩色矩形的特效,给人一种源在发光的印象。 更多...
导入语句 | import Qt5Compat.GraphicalEffects |
自从 | QtGraphicalEffects 1.0 |
继承 |
属性
- cached : bool
- color : color
- cornerRadius : real
- glowRadius : real
- spread : real
详细描述
此效果旨在具有一定的性能。渐变的形状限于有自定义圆角的矩形。需要自定义形状时,请考虑使用 Glow 效果。
应用效果 |
---|
示例
以下示例展示了如何应用此效果。
import QtQuick import Qt5Compat.GraphicalEffects Item { width: 300 height: 300 Rectangle { id: background anchors.fill: parent color: "black" } RectangularGlow { id: effect anchors.fill: rect glowRadius: 10 spread: 0.2 color: "white" cornerRadius: rect.radius + glowRadius } Rectangle { id: rect color: "black" anchors.centerIn: parent width: Math.round(parent.width / 1.5) height: Math.round(parent.height / 2) radius: 25 } }
属性文档
cached : bool |
此属性允许效果输出像素被缓存以提高渲染性能。
每次更改源或效果属性时,必须在缓存中更新像素。内存消耗增加,因为需要额外的内存缓冲区来存储效果输出。
建议在源或效果属性动画时禁用缓存。
默认情况下,属性设置为 false
。
color : color |
此属性定义用于渐变的 RGBA 颜色值。
默认情况下,属性设置为 "white"
。
具有不同颜色值的输出示例 | ||
---|---|---|
color: #ffffff | color: #55ff55 | color: #5555ff |
glowRadius: 20 | glowRadius: 20 | glowRadius: 20 |
spread: 0 | spread: 0 | spread: 0 |
cornerRadius: 25 | cornerRadius: 25 | cornerRadius: 25 |
cornerRadius : real |
此属性定义用于绘制具有圆角的渐变的圆角半径。
该值范围从 0.0 到渐变的有效宽度或高度的一半,取较小者。这可以通过:min(width, height) / 2.0 + glowRadius
来计算。
默认情况下,该属性绑定到glowRadius属性。调整glowRadius属性时,发光效果就像矩形被模糊一样。
不同cornerRadius值输出的示例 | ||
---|---|---|
cornerRadius: 0 | cornerRadius: 25 | cornerRadius: 50 |
glowRadius: 20 | glowRadius: 20 | glowRadius: 20 |
spread: 0 | spread: 0 | spread: 0 |
颜色: #ffffff | 颜色: #ffffff | 颜色: #ffffff |
glowRadius : 实数 |
该属性定义了发光效果达到项区域之外的像素数量。
值的范围从0.0(无发光)到inf(无限发光)。默认情况下,该属性设置为0.0
。
不同glowRadius值输出的示例 | ||
---|---|---|
glowRadius: 10 | glowRadius: 20 | glowRadius: 40 |
spread: 0 | spread: 0 | spread: 0 |
颜色: #ffffff | 颜色: #ffffff | 颜色: #ffffff |
cornerRadius: 25 | cornerRadius: 25 | cornerRadius: 25 |
spread : 实数 |
该属性定义了发光颜色在源边缘附近增强的部分有多大。
值的范围从0.0(无强度增加)到1.0(最大强度增加)。默认情况下,该属性设置为0.0
。
不同spread值输出的示例 | ||
---|---|---|
spread: 0.0 | spread: 0.5 | spread: 1.0 |
glowRadius: 20 | glowRadius: 20 | glowRadius: 20 |
颜色: #ffffff | 颜色: #ffffff | 颜色: #ffffff |
cornerRadius: 25 | cornerRadius: 25 | cornerRadius: 25 |
© 2024 The Qt Company Ltd. 本文档中包含的贡献的版权属于其 respective owners。本提供的文档是根据自由软件基金会发布的GNU自由文档许可版1.3条款许可的。Qt及其标志是The Qt Company Ltd.在芬兰和其他国家的商标。所有其他商标均为其 respective owners的财产。