liudianwu |
2020-05-12 09:50 |
Qt开源作品7-高亮按钮控件
## 一、前言 这个高亮按钮控件并非本人原创作品,是参考的Qt界的一个大师级人物公孙二狗的作品,各位有兴趣可以去搜索查看,在原作者的代码上,我只是改成了自己的控件的框架结构,然后完善了一些细节,比如增加了各种颜色设置,提供直接切换颜色模拟交通灯等。
其实整个编程学习过程都是一个不断学习借鉴的过程,不断参考别人的代码,参考自带demo的代码,参考帮助文档,面向搜索编程等,遇到问题不断的先自己努力解决,并思考如何更好的办法,建议学习编程的过程中,多看帮助文档很重要,基本上涵盖了所有函数的说明,起码基本说明是有的,然后参考自带的demo,这样几年搞下来,保准水平蹭蹭蹭的上涨。
高亮按钮控件功能: 1. 可设置文本,居中显示 2. 可设置文本颜色 3. 可设置外边框渐变颜色 4. 可设置里边框渐变颜色 5. 可设置背景色 6. 可直接调用内置的设置 绿色/红色/黄色/黑色/蓝色 等公有槽函数 7. 可设置是否在容器中可移动,当成一个对象使用 8. 可设置是否显示矩形 9. 可设置报警颜色+非报警颜色 10. 可控制启动报警和停止报警,报警时闪烁
## 二、代码思路 ```c++ //绘制外边框 void LightButton::drawBorderOut(QPainter *painter) { int radius = 99; painter->save(); painter->setPen(Qt::NoPen); QLinearGradient borderGradient(0, -radius, 0, radius); borderGradient.setColorAt(0, borderOutColorStart); borderGradient.setColorAt(1, borderOutColorEnd); painter->setBrush(borderGradient); painter->drawEllipse(-radius, -radius, radius * 2, radius * 2); painter->restore(); } //绘制内边框 void LightButton::drawBorderIn(QPainter *painter) { int radius = 90; painter->save(); painter->setPen(Qt::NoPen); QLinearGradient borderGradient(0, -radius, 0, radius); borderGradient.setColorAt(0, borderInColorStart); borderGradient.setColorAt(1, borderInColorEnd); painter->setBrush(borderGradient); painter->drawEllipse(-radius, -radius, radius * 2, radius * 2); painter->restore(); } //绘制主背景 void LightButton::drawBg(QPainter *painter) { int radius = 80; painter->save(); painter->setPen(Qt::NoPen); painter->setBrush(bgColor); painter->drawEllipse(-radius, -radius, radius * 2, radius * 2); painter->restore(); } //绘制文字 void LightButton::drawText(QPainter *painter) { if (text.isEmpty()) { return; }
int radius = 100; painter->save();
QFont font; font.setPixelSize(85); painter->setFont(font); painter->setPen(textColor); QRect rect(-radius, -radius, radius * 2, radius * 2); painter->drawText(rect, Qt::AlignCenter, text); painter->restore(); } //绘制遮罩层 void LightButton::drawOverlay(QPainter *painter) { if (!showOverlay) { return; }
int radius = 80; painter->save(); painter->setPen(Qt::NoPen);
QPainterPath smallCircle; QPainterPath bigCircle; radius -= 1; smallCircle.addEllipse(-radius, -radius, radius * 2, radius * 2); radius *= 2; bigCircle.addEllipse(-radius, -radius + 140, radius * 2, radius * 2);
//高光的形状为小圆扣掉大圆的部分 QPainterPath highlight = smallCircle - bigCircle;
QLinearGradient linearGradient(0, -radius / 2, 0, 0); overlayColor.setAlpha(100); linearGradient.setColorAt(0.0, overlayColor); overlayColor.setAlpha(30); linearGradient.setColorAt(1.0, overlayColor); painter->setBrush(linearGradient); painter->rotate(-20); painter->drawPath(highlight);
painter->restore(); } ```
## 三、效果图 [attachment=21567]
## 四、开源主页 **以上作品完整源码下载都在开源主页,会持续不断更新作品数量和质量,欢迎各位关注。** 1. 国内站点:[https://gitee.com/feiyangqingyun/QWidgetDemo](https://gitee.com/feiyangqingyun/QWidgetDemo) 2. 国际站点:[https://github.com/feiyangqingyun/QWidgetDemo](https://github.com/feiyangqingyun/QWidgetDemo) 3. 个人主页:[https://blog.csdn.net/feiyangqingyun](https://blog.csdn.net/feiyangqingyun) 4. 知乎主页:[https://www.zhihu.com/people/feiyangqingyun/](https://www.zhihu.com/people/feiyangqingyun/) |
|