专业编程基础技术教程

网站首页 > 基础教程 正文

QML 图形渲染 - RadialGradient(qml columnlayout)

ccvgpt 2024-08-03 12:38:35 基础教程 10 ℃

属性介绍

angle : real

渐变围绕其中心点的旋转。旋转仅在 “水平半径” 和 “垂直半径” 属性不相等时可见。角度以度为单位,默认值为 0

QML 图形渲染 - RadialGradient(qml columnlayout)

cached : bool

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

gradient : Gradient

颜色指定为一组 GradientStop 子项,每个子项定义渐变上从 0.0 到 1.0 的位置和颜色。每个 GradientStop 的位置由 position 属性定义,颜色由 color 属性定义

horizontalOffset : real

渐变中心点相对于项目中心的水平偏移(以像素为单位)。值的范围从 -inf 到 inf。默认情况下,此属性设置为 0

horizontalRadius : real

径向渐变的形状和大小(水平半径)。如果半径相等,则渐变的形状为圆形。如果水平和垂直半径不同,则形状为椭圆形。半径以像素为单位。该值的范围从 -inf 到 inf。默认情况下,水平半径绑定到宽度,垂直半径绑定到高度

source : variant

要用渐变填充的项。源项被渲染到中间像素缓冲区中,结果的 alpha 值用于确定渐变的像素在显示中的可见性。“源” 的默认值未定义,在这种情况下,整个效果区域将填充渐变。注意:不支持让效果包含自身

verticalOffset : real

渐变中心点相对于项目中心的垂直偏移(以像素为单位)。值的范围从 -inf 到 inf。默认情况下,此属性设置为 0

verticalRadius : real

径向渐变的形状和大小(垂直半径)。如果半径相等,则渐变的形状为圆形。如果水平和垂直半径不同,则形状为椭圆形。半径以像素为单位。该值的范围从 -inf 到 inf。默认情况下,水平半径绑定到宽度,垂直半径绑定到高度

注意事项

RadialGradient 支持 OpenGL 渲染

渐变由两种或两种以上的颜色定义,这些颜色无缝混合。颜色从项目的中间开始,在边框处结束

不同数值效果展示

官方示例

import QtQuick 2.12
import QtGraphicalEffects 1.12

Item {
    width: 300
    height: 300
    
    RadialGradient {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 0.5; color: "black" }
        }
    }
}

最近发表
标签列表