仪表指针样式_Qt自定义Widget之仪表盘
上次和大家分享了使用Qml制作的仪表盘的过程,这次和大家分享下Qt的自定义控件过程。
效果图如上,有图有真相啊。
程序源码来自B站上,几乎没做任何修改,这里主要说下自定义控件的流程。
程序源码:
xieguiproject/GCTgithub.com
B站视频地址:
QT自定义控件绘制之表盘绘制_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com
以前一篇关于一些2D绘图的文章:
Qt中国象棋一—— Qt 2D 绘图入门mp.weixin.qq.com
首先Qt已经为我们提供了众多丰富且易用的基础控件,但是很多情况下我们需要实现自己的设计形态,如上面的仪表盘。这时候就需要自定义控件了,而且实际使用中还会用到样式表的。本次主要简述下自定义仪表盘的流程。
一. 仪表盘自身工作流程
仪表盘控件继承自QWidget,使用定时器以100ms的频率触发painEvent绘图事件。
绘制控件程序如下:
//绘制控件
void Dashboard1::drawDashBoardWiget(QPainter *painter)
{
//全局参数初始化
qParmInit();
//设置透明
setOtherBackgroud(true,painter);
//绘制表盘
drawDashBoard(painter);
//绘制刻度尺
drawDivideRule(painter);
//绘制指针
drawDishBoardPointer(painter);
//绘制表盘文字
drawDashBoardText(painter);
}
刻度的位置通过setValue()方法来调整。
- drawDashBoard()
只保留绘制表盘部分代码,如图,标出了4个数字,即是绘制了4个圆,程序中则是调用了4次drawEllipse(绘制椭圆)进行绘制。
2. drawDivideRule()
添加绘制刻线部分程序,效果如下。
程序中计算的方法就不做介绍了,fMaxDivide表示大刻度线的个数,fMinDivide表示小刻度线的个数。
3. drawDivideRule()
绘制刻度盘指针
通过绘制一个多边形与一个椭圆组合而成。
4. drawDashBoardText()
绘制表盘上的文本,效果如下
二、 关于程序对自定义控件的调用
从github上下载下来的程序是通过提升控件的方式调用的。具体就是先拖一个Widget,然后右键提升,Qt会自动识别程序中已包含的自定义控件的。在主UI中可直接访问被提升过的控件的方法。
第二种方法就是通过布局来addWidget。效果如下
三 . 小结
虽然不清楚刻度线与刻度指针的具体计算方式,但是我们可以快速的构建起一个项目,这应该是目前首要的任务。
修改过的完整工程可在公众号后台留言获取。
Pou光明
Qt自定义仪表盘控件https://www.zhihu.com/video/1227261158266642432
Qml仪表盘效果视频https://www.zhihu.com/video/1227261323710988288
仪表指针样式_Qt自定义Widget之仪表盘相关推荐
- 仪表指针样式_PS教程!教你绘制拟物仪表盘拟物图标
大家是不是觉得拟物图标是个坎?时常跃跃欲试又无从下手?或者细节分析半天最后只得出"画起来会没完没了"的结论? mmmm--要不别纠结了,打开软件,今天让我们来试着用photosho ...
- 【css】自定义鼠标光标指针样式-前端
本文功能介绍:自定义.定制鼠标光标指针样式! cursor: url(), auto; 除了浏览器提供的鼠标样式,我们还可以借助 cursor: url() 的特性,即可实现定制自己的鼠标样式! /* ...
- Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见 学习Dart 基础知识 移步这里 安装flutter环境相关 移步这里 flutter基础组件使用相关 移步这里 文章目录 一 ...
- CSS鼠标指针样式详解,鼠标经过变小手(链接类型指针)提示可点击
鼠标经过变小手 div {cursor:pointer; // 直接给需要改变指针样式的对象添加该属性,不要被误导为 :hover 伪类 } cursor属性及属性值介绍 <!DOCTYPE h ...
- JavaScript中改变鼠标指针样式的方法
JavaScript中改变鼠标指针样式的方法 在js中我们可以通过style对象的cursor属性来设置鼠标指针的样式,例 var body = document.querySelector(&quo ...
- Flutter 15: 图解 ListView 不同样式 item 及 Widget 显隐性
一年一度的谷歌大会又开始了,谷歌对 Flutter 的投入力度又加大了,所以更得好好学 Flutter 了.小菜在做新闻列表方面的 Demo 时,想到会在列表中展示多种不同 item 样式,今天特意借 ...
- Magento2创建自定义Widget 并通过添加图片选择器插入图片
为什么80%的码农都做不了架构师?>>> 创建自定义Widget 并通过添加图片选择器插入图片 自定义widget 先在模块的etc 配置文件中创建widget.xml配置文件 ...
- Webappbuilder自定义widget模板
Webappbuilder自定义widget模板 by 李远祥 到\\widgets\samplewidgets目录下拷贝 CustomWidgetTemplate 文件并重命名为MyWidget 设 ...
- html去除radio的样式,【HTML+CSS】纯CSS设置checkbox大小和样式 附Radio的去除默认样式和自定义样式...
话不多说,直接上效果图: 一.使用的基本div: 正常复选框 复选框checked 复选框disableed 二.自定义样式: input[type=checkbox] { margin-right: ...
最新文章
- ie下input的type属性为hidden问题
- hive入门之安装模式
- 程序员编程艺术:第二章、字符串是否包含问题
- 160 - 3 Afkayas.2
- python项目部署访问特别卡_【python新人求助】flask+pymssql 通过wsgi发布到Apache,访问接口服务器卡死?...
- 如何用python32位开发词典软件_Python如何实现字典?
- Android学习--还有一些小技巧
- 修改打开方式的程序列表中列出程序的名称
- Linux学习笔记1 - Linux系统简介
- 国内最新Unity3D视频教程合辑
- 华东师范大学2019计算机与软件工程学院 “高可信”夏令营总结
- Gartner:浪潮存储进入分布式存储前三
- 计算机软件实习每日学习打卡(5)20201218
- 常见的几种页面内容布局方式
- 对象的向上转型和向下转型
- 路由流量管理(TM)初步认识(二次更新)
- iOS 屏蔽系统更新描述文件更新!快把烦人的系统更新提示关掉!
- springboot+freemarker导出word
- Qt实现 栅格布局效果
- vue 计数器_Vuex实现计数器以及列表展示效果