QT样式表之径向渐变(qradialgradient)

目录

QT样式表之径向渐变(qradialgradient)

1.QRadialGradient类介绍

2.经验总结

3.测试代码和效果截图

3.1初始状态

3.2修改cy

3.3修改cx

3.4修改radius为0.2

3.5修改radius为0.8

3.6修改fx和fy

3.7修改fx和fy

3.8修改stop0和stop1的颜色

3.9修改stop0和stop1后的数值

---

QT样式表之径向渐变(qradialgradient)

1.QRadialGradient类介绍

QRadialGradient类与QBrush一起使用来指定径向渐变刷。

Qt支持简单的和扩展的径向梯度。

简单的径向梯度在焦点和环绕它的圆上的终点之间插入颜色。扩展的径向梯度在焦点圆和中心圆之间插入颜色。由两个圆定义的圆锥体外的点将是透明的。对于简单的径向梯度，焦点被调整到位于中心圆内，而焦点可以在扩展径向梯度中有任何位置。

在端点之外，渐变根据当前设置的扩展方法进行填充、反射或重复:

颜色是使用QGradientStop类型的停止点定义的，即位置和颜色。使用QGradient::setColorAt()或QGradient::setStops()函数来定义停止点。它是描述如何填充梯度区域的梯度停止点的渐变中的完整集合。如果没有指定停止点，则使用从0到1的黑色到白色的渐变。

除了从QGradient继承的函数之外，QRadialGradient类还提供了center()， focalPoint()和radius()函数，分别返回渐变的中心，焦点和半径。

参见QLinearGradient, QConicalGradient和gradient Example。

2.经验总结

下面请大家看一段QT官方文档给出的径向渐变的实例代码：

/* radial gradient from white to green */
QTextEdit {
    background: qradialgradient(cx:0, cy:0, radius: 1,
                fx:0.5, fy:0.5, stop:0 white, stop:1 green)
}

大家可以看到这个里面的参数有很多个，每个参数代表什么意思，有什么作用，官方文档并未解释得很清楚，为此我自己通过实验总结了一下，结论如下：

• cx和cy：可以当成是一个圆心的坐标，假设现在有个矩形，矩形的左上角就是圆心，其坐标是（0,0），而矩形的右下角的坐标是（1,1），所以cx、cy的取值范围都是[0,1]（负数可能也有效，这里我没试）。左上角和右下角形成的对角线的中心坐标是（0.5,0.5）.
• fx和fy：是一个焦点的坐标，其取值范围和cx、cy是一样的，当fx为0.5时，焦点处于矩形水平方向的中心位置，当fy=0.5时，焦点处于矩形垂直方向上的中心位置
• stop:0 white, stop:1 green表示的是从白色到绿色的渐变，stop0是焦点处的颜色即白色，stop1表示的是从圆心到焦点方向连成的直线与矩形边缘相交的那一条边附近的颜色，即绿色。两个stop之间的差值越小，颜色过度区域会越小。
• radius: 1：影响的是过度区域的大小，如果从(0,0)到(1,1)之间的过度，则radius是1，如果只需要用对角线长度的十分之一的区域来多度，则radius填0.1即可。

3.测试代码和效果截图

3.1初始状态

QTextEdit {
    background: qradialgradient(cx:0, cy:0, radius: 1,
                fx:0.5, fy:0.5, stop:0 white, stop:1 green)
}

3.2修改cy

/* 从白色到绿色的径向渐变 */
QTextEdit {
    background: qradialgradient(cx:0, cy:0.5, radius: 1,
                fx:0.5, fy:0.5, stop:0 white, stop:1 green)
}

3.3修改cx

/* 从白色到绿色的径向渐变 */
QTextEdit {
    background: qradialgradient(cx:0.5, cy:0.8, radius: 1,
                fx:0.5, fy:0.5, stop:0 white, stop:1 green)
}

3.4修改radius为0.2

/* 从白色到绿色的径向渐变 */
QTextEdit {
    background: qradialgradient(cx:0, cy:0, radius: 0.2,
                fx:0.5, fy:0.5, stop:0 white, stop:1 green)
}

3.5修改radius为0.8

/* 从白色到绿色的径向渐变 */
QTextEdit {
    background: qradialgradient(cx:0, cy:0, radius: 0.8,
                fx:0.5, fy:0.5, stop:0 white, stop:1 green)
}

3.6修改fx和fy

/* 从白色到绿色的径向渐变 */
QTextEdit {
    background: qradialgradient(cx:0, cy:0, radius: 1,
                fx:0.1, fy:0.5, stop:0 white, stop:1 green)
}

3.7修改fx和fy

/* 从白色到绿色的径向渐变 */
QTextEdit {
    background: qradialgradient(cx:0, cy:0, radius: 1,
                fx:0.5, fy:0.9, stop:0 white, stop:1 green)
}

3.8修改stop0和stop1的颜色

/* 从蓝色到红色的径向渐变 */
QTextEdit {
    background: qradialgradient(cx:0, cy:0, radius: 1,
                fx:0.5, fy:0.9, stop:0 blue, stop:1 red)
}

3.9修改stop0和stop1后的数值

/* 从蓝色到红色的径向渐变 */
QTextEdit {
    background: qradialgradient(cx:0, cy:0, radius: 1,
                fx:0.5, fy:0.9, stop:0 blue, stop:0.2 red)
}