通过qss实现Qt按钮的默认效果——qconicalgradient
2016-01-17 00:49
639 查看
这里提供一种使用qconicalgradient()实现QPushButton的默认显示效果的方法,由名字可以知道,qconicalgradient()提供的是一种扇形渐变效果,或称为圆锥式渐变效果。
直接上代码 >>
按钮正常状态时的样式
效果如下:
按钮被鼠标滑过时的样式
效果如下:
按钮被按下时的样式
效果如下:
qconicalgradient()参数详解
先来思考如果我们自己实现扇形渐变的话,或者说从数学角度分析,需要些什么元素才能准确描述它。
没错!我们需要确定扇形的圆心(中心点)、扇形的半径、扇形的起始角度、扇形的跨度,以及扇形所填充颜色的渐变方向。不过这里我们不需要给定半径大小,因为按钮的大小和形状是未知的,所以我们可以认为qconicalgradient()已经将扇形半径设定为无限大了。
下面解释一下qconicalgradient()中的各个参数到底是什么意思。
cx和cy的值是中心点的逻辑坐标,所谓逻辑坐标就是将它所描述的对象(箱体模型)的左上顶点设为(0.0, 0.0),右下顶点设为(1.0,
1.0)。所以这里的(cx:0.5, cy:0.5)就是指定扇形的圆心在按钮的中心点上。
angle的值代表扇形的起始角度(单位:度),和数学上定义的一样,默认扇形的起始角度为0,即指向x轴的正方向,角度为正是逆时针方向,角度为负是顺时针方向。
如图所示,蓝点为中心点,黑线为angle等于0时的起始线,红线为angle等于180时的起始线。
stop可以控制扇形的跨度和颜色,确切来说它控制的是扇形从哪里、以什么颜色开始渐变。stop的第一个值表示渐变开始的位置(以angle指定的的角度为0,逆时针转360度后为1),第二个值表示此处的颜色值。所以上面的例子其实0.49999和0.50001之间是有渐变效果的,只不过实在看不出来而已(或者说显示屏无法表达这种渐变)。
值得注意的是,第一个stop前的那部分(即上述例子的0.49999)会显示为第一个stop指定的颜色,而最后一个stop后的那部分(即上述例子的0.50001)会显示为最后一个stop指定的颜色,相信如果用过photoshop等图像处理软件的会很容易理解这一点。
直接上代码 >>
按钮正常状态时的样式
QPushButton { border: 1px solid rgb(124, 124, 124); background-color: qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(214, 214, 214, 255), stop:0.50001 rgba(236, 236, 236, 255)); border-radius:5px; }
效果如下:
按钮被鼠标滑过时的样式
QPushButton:hover{ border: 1px solid #3C80B1; background-color: qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(181, 225, 250, 255), stop:0.50001 rgba(222, 242, 251, 255)); border-radius:5px; }
效果如下:
按钮被按下时的样式
QPushButton:pressed{ border: 1px solid #5F92B2; background-color: qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(134, 198, 233, 255), stop:0.50001 rgba(206, 234, 248, 255)); border-radius:5px; }
效果如下:
qconicalgradient()参数详解
先来思考如果我们自己实现扇形渐变的话,或者说从数学角度分析,需要些什么元素才能准确描述它。
没错!我们需要确定扇形的圆心(中心点)、扇形的半径、扇形的起始角度、扇形的跨度,以及扇形所填充颜色的渐变方向。不过这里我们不需要给定半径大小,因为按钮的大小和形状是未知的,所以我们可以认为qconicalgradient()已经将扇形半径设定为无限大了。
下面解释一下qconicalgradient()中的各个参数到底是什么意思。
cx和cy的值是中心点的逻辑坐标,所谓逻辑坐标就是将它所描述的对象(箱体模型)的左上顶点设为(0.0, 0.0),右下顶点设为(1.0,
1.0)。所以这里的(cx:0.5, cy:0.5)就是指定扇形的圆心在按钮的中心点上。
angle的值代表扇形的起始角度(单位:度),和数学上定义的一样,默认扇形的起始角度为0,即指向x轴的正方向,角度为正是逆时针方向,角度为负是顺时针方向。
如图所示,蓝点为中心点,黑线为angle等于0时的起始线,红线为angle等于180时的起始线。
stop可以控制扇形的跨度和颜色,确切来说它控制的是扇形从哪里、以什么颜色开始渐变。stop的第一个值表示渐变开始的位置(以angle指定的的角度为0,逆时针转360度后为1),第二个值表示此处的颜色值。所以上面的例子其实0.49999和0.50001之间是有渐变效果的,只不过实在看不出来而已(或者说显示屏无法表达这种渐变)。
值得注意的是,第一个stop前的那部分(即上述例子的0.49999)会显示为第一个stop指定的颜色,而最后一个stop后的那部分(即上述例子的0.50001)会显示为最后一个stop指定的颜色,相信如果用过photoshop等图像处理软件的会很容易理解这一点。
相关文章推荐
- Ubuntu安装QT出现权限不够的错误
- Qt 插件综合编程-基于插件的OpenStreetMap瓦片查看器客户端(0)-引子
- qt嵌入式版本源码编译的各种问题
- Qt creater设置成黑色主题
- Qt 和 Boost关于信号和槽的对比说明
- Qt5中使用lambda表达式
- 自学QT之传递控件指针判断是哪个控件被操作
- 关于Qt信号/槽的参数类型
- pyqt5-为QListWidget添加右键菜单
- 浅谈Qt代理
- qt 状态机弹跳效果
- 【大话QT之七】QT序列化操作
- 【Qt5】【Markdown】用到哪些文档就翻译过来
- Qt Creator添加/查找槽错误
- MQTT协议详解
- 对象封装属性的真正源头
- SPOJ QTREE 树链剖分
- QT全平台设置图标,全平台静态编译 good
- Qt学习:线程间共享数据(使用信号槽传递数据,必须提前使用qRegisterMetaType来注册参数的类型)
- [Magento SQL] 获取订单 总金额,总Qty,并排除 指定客户Email的订单