径向渐变 QML 类型

绘制径向渐变。 更多...

导入语句import Qt5Compat.GraphicalEffects
QtGraphicalEffects 1.0
继承

Item

属性

详细描述

渐变通过两个或多个颜色定义,这些颜色无缝混合。颜色从项的中间开始到边缘结束。

应用效果

例子

以下示例显示了如何应用效果。

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

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

属性文档

angle : 实数

此属性定义了渐变在其中心点周围的旋转。只有当horizontalRadiusverticalRadius 属性不相等时,旋转才可见。角度以度为单位,默认值为 0

不同角度值的输出示例

angle: 0angle: 45angle: 90
水平偏移: 0水平偏移: 0水平偏移: 0
垂直偏移: 0垂直偏移: 0垂直偏移: 0
水平半径: 100水平半径: 100水平半径: 100
垂直半径: 300垂直半径: 300垂直半径: 300

cached : 布尔值

此属性允许缓存效果输出像素以改进渲染性能。

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

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

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


gradient : 渐变

渐变通过两种或多种颜色定义,这些颜色无缝混合。颜色通过一组GradientStop子项指定,每个子项定义了从0.0到1.0的渐变位置和一个颜色。每个GradientStop的位置通过设置位置属性定义。颜色通过设置颜色属性定义。

不同渐变值的输出示例

渐变
Gradient {
  GradientStop {
   position: 0.000
   color: Qt.rgba(1, 0, 0, 1)
  }
  GradientStop {
   position: 0.167
   color: Qt.rgba(1, 1, 0, 1)
  }
  GradientStop {
   position: 0.333
   color: Qt.rgba(0, 1, 0, 1)
  }
  GradientStop {
   position: 0.500
   color: Qt.rgba(0, 1, 1, 1)
   }
  GradientStop {
   position: 0.667
   color: Qt.rgba(0, 0, 1, 1)
  }
  GradientStop {
   position: 0.833
   color: Qt.rgba(1, 0, 1, 1)
  }
  GradientStop {
   position: 1.000
   color: Qt.rgba(1, 0, 0, 1)
  }
}
渐变
Gradient {
  GradientStop {
    position: 0.0
    color: "#F0F0F0"
  }
  GradientStop {
    position: 0.5
    color: "#000000"
  }
  GradientStop {
    position: 1.0
    color: "#F0F0F0"
  }
}
渐变
Gradient {
  GradientStop {
    position: 0.0
    color: "#00000000"
  }
  GradientStop {
    position: 1.0
    color: "#FF000000"
  }
}
水平偏移: 0水平偏移: 0水平偏移: 0
垂直偏移: 0垂直偏移: 0垂直偏移: 0
水平半径: 300水平半径: 300水平半径: 300
垂直半径: 300垂直半径: 300垂直半径: 300
角度: 0角度: 0角度: 0

水平偏移量 : 实数

水平偏移量和垂直偏移量属性定义了渐变中心点相对于项目中心的像素偏移。

值的范围从负无穷到正无穷。默认情况下,这些属性设置为0

不同水平偏移量值的输出示例

水平偏移量: -150水平偏移量: 0水平偏移量: 150
垂直偏移: 0垂直偏移: 0垂直偏移: 0
水平半径: 300水平半径: 300水平半径: 300
垂直半径: 300垂直半径: 300垂直半径: 300
角度: 0角度: 0角度: 0

水平半径 : 实数

水平半径和垂直半径属性定义了径向渐变的形状和大小。如果半径相等,渐变形状为圆形。如果水平和垂直半径不同,形状为椭圆形。半径以像素为单位。

值的范围从负无穷到正无穷。默认情况下,水平半径绑定到宽度,垂直半径绑定到高度。

不同水平半径值的输出示例

水平半径: 300水平半径: 100
水平偏移: 0水平偏移: 0
垂直偏移: 0垂直偏移: 0
垂直半径: 300垂直半径: 300
角度: 0角度: 0
渐变: QQuickGradient(0xa05fb10)渐变: QQuickGradient(0xa05fb10)

: 变体

此属性定义将要填充渐变的项。源项会被渲染到一个中间像素缓冲区中,并将结果中的alpha值用于确定显示中渐变像素的可见性。源默认值未定义时,整个效果区域将填充渐变。

不同源值的输出示例

源: 未定义源: Image { source: images/butterfly.png }
水平偏移: 0水平偏移: 0
垂直偏移: 0垂直偏移: 0
水平半径: 300水平半径: 300
垂直半径: 300垂直半径: 300
角度: 0角度: 0

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


垂直偏移量 : 实数

水平偏移量和垂直偏移量属性定义了渐变中心点相对于项目中心的像素偏移。

值的范围从负无穷到正无穷。默认情况下,这些属性设置为0

不同水平偏移量值的输出示例

水平偏移: -150 水平偏移: 0 水平偏移: 150
垂直偏移量: 0垂直偏移量: 0垂直偏移量: 0
水平半径: 300水平半径: 300水平半径: 300
垂直半径: 300垂直半径: 300垂直半径: 300
角度: 0角度: 0角度: 0

垂直半径 : 实数

水平半径和垂直半径属性定义了径向渐变的形状和大小。如果半径相等,渐变形状为圆形。如果水平和垂直半径不同,形状为椭圆形。半径以像素为单位。

值范围从负无穷到正无穷。默认情况下,水平半径绑定到宽度,垂直半径绑定到高度。

不同水平半径值的输出示例

水平半径: 300 水平半径: 100
水平偏移: 0水平偏移: 0
垂直偏移: 0垂直偏移: 0
垂直半径: 300垂直半径: 300
角度: 0角度: 0
渐变: QQuickGradient(0xa05fb10)渐变: QQuickGradient(0xa05fb10)

© 2024 Qt公司有限公司。本文件中包含的文档贡献均为各自所有者的版权。本文档依据由自由软件基金会发布的GNU自由文档许可证版本1.3条款进行许可。Qt及其相关标志是芬兰及/或其他国家/地区的Qt公司商标。商标。所有其他商标均为各自所有者的财产。