一.前言 在Qt自定义控件中,仪表盘控件是数量最多的,写仪表盘都写到快要吐血,可能是因为各种工业控制领域用的比较多吧,而且仪表盘又是比较生动直观的,这次看到百度的echart中有这个控件,所以也来模仿做了一个,其实掌握了一两个仪表盘的绘制方法以后,其他仪表盘的绘制都是如鱼得水,基本上变化很小.总结起来就如下几点: 1:仪表盘边框 2:刻度尺 3:刻度值 4:圆环进度 5:指针 6:当前值 7:仪表盘标题 无论什么仪表盘,基本上包含的上面几个要素的大部分,所以只要掌握几个要素的绘制,任何仪表盘绘制…

一.前言 很多时候需要有一个控件,能够替代容器控件,自动容纳多个widget,自适应宽高,然后提供滚动条功能,这就必然需要用到QScrollArea控件,可设置各个子面板的间距等,也在很多系统中用到,比如温湿度设备面板,有几百个温湿度设备,需要一个容器放置,自动产生滚动条,可以设置面板的固定宽高或者自适应拉伸,其实就是放了表格布局+弹簧来设置. 在后期的Qt内置控件的研究过程中,发现QListWidget也提供了类似的功能,所以后期有部分应用场景直接采用QListWidget来做. 二.实现的功…

一.前言 在很多web网页上,经常可以看到一个设备对应一个面板,或者某种同等类型的信息全部放在一个面板上,该面板还可以拖来拖去的,这个控件首次用在智能访客管理平台中,比如身份证信息一个面板,访客信息一个面板,被访人信息一个面板,这样相当于分类展示了,还提供了对应的标题栏有文字显示,这个控件的使用场景也是非常多,还有个子标题可以设置,拓展了报警闪烁的接口. 二.实现的功能 1:支持所有widget子类对象,自动产生滚动条 2:支持自动拉伸自动填充 3:提供接口获取容器内的所有对象的指针 4:可设置…

前言 导航按钮控件,主要用于各种漂亮精美的导航条,我们经常在web中看到导航条都非常精美,都是html+css+js实现的,还自带动画过度效果,Qt提供的qss其实也是无敌的,支持基本上所有的CSS2属性,配合QPainter这个无敌大法工具,没有什么不能绘制的.这个控件总结了大部分的导航条样式,比如左侧+右侧+顶部+底部,线条指示器,倒三角指示器等.还可以在导航条前面加上图标等,就显得更加有特色.有了此控件,再也不用担心没有精美的导航了. 实现的功能 1:可设置文字的左侧+右侧+顶部+底部间隔…

一.前言 这个控件写了很久了,是最早期的一批控件中的一个,和温度计控件类似,都是垂直的进度条,可以设置不同的背景颜色,左侧的刻度也可以自由设定,还提供了动画效果,其实就是开启定时器慢慢的进度到设定的目标值,如果设定的值比当前值大,则递增,反之递减.由于当时的qpainter绘制功底还不够如火纯情,所以当时的刻度尺部分都是定死的字体大小,并不会随着控件变化而增大. 二.实现的功能 1:可设置精确度(小数点后几位)和间距 2:可设置背景色/柱状颜色/线条颜色 3:可设置长线条步长及短线条步长 4:可…

一.前言 在平时的写作过程中,经常需要将一些操作动作和效果图截图成gif格式,使得涵盖的信息更全面更生动,有时候可以将整个操作过程和运行效果录制成MP4,但是文件体积比较大,而且很多网站不便于上传,基本上都支持gif动图,一般一个5秒左右的gif,800*600分辨率,可以很好的控制在500KB内,这样就比较完美的支持各大网站上传动图. 最开始使用的是ScreenGif.exe,用了很久,感觉还可以,后面一个朋友推荐用LICEcap.exe,体积更小,压缩比更高,再到后来发现有个gif.h开源的…

一.前言 平铺背景控件,主要的应用场景是作为画布出现,黑白相间的背景图,然后上面可以放置图片图形等,使得看起来更美观,比如PS软件新建图层以后的背景,FireWorks软件新建画布以后的透明背景,ICO制作软件新建画布以后的背景,都会采用一个黑白相间的背景.尽管本人用QPainter很多年,后面在翻阅QPainter自带的函数中才发现居然QPainter自带了这个绘制平铺背景的函数,擦,他么叫drawTiledPixmap,Qt不愧是跨平台GUI开发中的佼佼者,这些东西居然都考虑到了,说到考虑的…

前言 做过安防视频监控的同学都清楚,在视频监控系统软件上都可以看到一个云台控制区域,可以对球机进行下下左右等八个方位的运动控制,还可以进行复位,一般都是美工作图好,然后贴图的形式加入到软件中,好处是程序简单,界面美工,主要取决于美工的美图能力,缺点是对于各种分辨率的适应性稍微差点,需要不同的图片切图贴图,除非默认做好的是大图自适应看不出差别,可能大部分人所在的公司都是小公司,一般美工人员比较少甚至没有,都需要程序员一人负责,甚至一开始就要考虑到各种分辨率的应用场景以及后期可能的换肤换色等. 之前…

前言 旋转仪表盘,一般用在需要触摸调节设置值的场景中,其实Qt本身就提供了QDial控件具有类似的功能,本控件最大的难点不在于绘制刻度和指针等,而在于自动计算当前用户按下处的坐标转换为当前值,这个功能想了很久,也看了QDial的源码,他里边写的非常复杂,最后还是参考的我打99分(100分留给自己未来写的书,哈哈!)的Qt书籍<c++ gui qt 4编程>中的篇章才写出来的,关键需要用到atan2将坐标转为值,看来学好数学真的很重要. 实现的功能 1:支持指示器样式选择 圆形指示器/指针指示器…

前言 速度仪表盘,写作之初的本意是用来展示当前测试的网速用的,三色圆环+数码管显示当前速度,Qt自带了数码管控件QLCDNumber,直接集成即可,同时还带有动画功能,其实也可以用在汽车+工业领域等,展示汽车的当前速度和各种指标情况,比如生成领域的完成百分比等,控件采用纯painter绘制,自由拉伸不变形,背景透明的,贴上个背景图就会显得更漂亮. 实现的功能 1:可设置范围值,支持负数值 2:可设置精确度,最大支持小数点后3位 3:可设置大刻度数量/小刻度数量 4:可设置开始旋转角度/结束旋转角…

前言 汽车仪表盘几乎是qt写仪表盘控件中最常见的,一般来说先要求美工做好设计图,然后设计效果图给到程序员,由程序员根据效果来实现,主要靠贴图,这种方法有个好处就是做出来的效果比较逼真,和真实效果图基本上保持一致,而且程序员也不会那么累,基本上入门级别的程序员都可以搞定,效率比较高,缺点是如果用户需要更改某个部件的颜色,比如指针的颜色等,需要重新做效果图贴图才能实现,比较麻烦,还有一点就是如果效果图原图不是很大,则遇到特殊分辨率情况下,可能会有失真的情况,被强制拉伸等. 我一贯都喜欢用painte…

前言 进度仪表盘主要应用场景是标识一个任务进度完成的状况等,可以自由的设置范围值和当前值,为了美观还提供了四种指示器(圆形指示器/指针指示器/圆角指针指示器/三角形指示器),各种颜色都可以设置,其中的动画效果采用的QPropertyAnimation类来实现,主要是线性插值法,生成一定规则的数值,用于设定的属性.今天有个朋友需要安卓版本的控件,其实采用qwidget写的控件都可以直接编译就可以到android上,于是直接重新编译了安卓版本,对应的apk已上传到共享文件夹,文末贴出android运…

一.前言 这个控件没有太多的应用场景,主要就是练手,论美观的话比不上之前发过的一个图片时钟控件,所以此控件也是作为一个基础的绘制demo出现在Qt源码中,我们可以在Qt的安装目录下找到一个时钟控件的绘制,甚至还有qml版本,本控件无非就是一个仪表边框加上时钟分钟刻度再加上时分秒指针,打完收工,我是在此基础上增加了可以设置各种颜色,然后鼠标右键可设置四种效果 普通效果/弹簧效果/连续效果/隐藏效果,弹簧效果的意思是秒钟走动的时候,先移动到超过指定位置,然后又重新弹回来,连续效果的意思是将步长减少,…

一.前言 这个控件是近期定制的控件,还是比较实用的控件之一,用户主要是提了三点需求,一点是切换焦点的时候控件放大突出显示,一点是可直接输入或者编辑值,还有一点是支持上下键及翻页键和鼠标滚轮来动态修改值,类似于qspinbox控件.要能够支持直接输入首先想到的就是qlineedit控件,在原有的仪表盘控件上中间部分,放置一个qlineedit控件用来输入值,采用正则表达式来限制只能输入数字,为了使得qlinedit和自定义绘制的仪表盘完全融为一体,必须设置qlineedit的样式为背景透明,至于输…

一.前言 这个控件取名叫迷你仪表盘,是以为该控件可以缩小到很小很小的区域显示,非常适合小面积区域展示仪表数据使用,还可以手动触摸调节进度,是我个人觉得最漂亮小巧的一个控件.初次看到类似的控件是在一个音乐视频编辑软件中,用来展示左通道右通道音量等,有非常多的类似的迷你仪表盘在整个软件系统中,用户可以直接鼠标滑动调节,以最小的占用区域展示最大的信息,漂亮! 本控件还拓展了可以左右等分显示,比如中间的值是0,左侧就是低于0的值区域,右侧就是大于0的值区域,进度不一样展示,支持左右旋转角度设置以及各种颜…

一.前言 飞行仪表是测定和表示飞机数据的工具,飞机中必不可少的一部分,飞行员根据飞行仪表表示的数据才能正确地做出判断.一般飞机仪表包括高度表+空速表+垂直速率表+姿态仪+航向指示表+转弯协调表. 这次要绘制的是其中的姿势仪,显示飞机相对于地平线的姿态,看姿态仪,飞行员能判断飞机姿态为偏左偏右,及偏上和偏下.姿态仪作用原理为一高度旋转的陀螺,不论飞机的姿态如何变化,此陀螺的定轴性在空间保持相同,因而能显示出飞机的俯仰及偏左偏右的姿态.姿态仪是仪表飞行时的重要仪表,在能见度差的飞行天气中,失去或不相…

一.前言 天气仪表盘控件是所有控件中唯一一个使用了svg矢量图的控件,各种天气图标采用的矢量图,颜色变换采用动态载入svg的内容更改生成的,其实也可以采用图形字体来做,本次控件为了熟悉下svg在Qt中的使用,才采用的svg来绘制. 天气一般要表示多个内容,温度+湿度+天气等,这就需要合理的布局多种元素的位置才能更加美观一些,这里参照的是网上一些通用的做法,比如最外层圆环是温度,中间圆环湿度,然后天气图标贴在中间圆环里边的左上角,同时再绘制温度湿度的值,动态变化的. 二.实现的功能 1:可设置两种…

一.前言 圆弧仪表盘在整个自定义控件大全中也稍微遇到了技术难点,比如背景透明,如果采用以前画圆形画扇形的方式绘制,肯定很难形成背景透明,需要用到切割,最后换了一种绘制方法,采用绘制圆弧的方式,即使用drawArc方法,这个方法有个注意点就是值要16,我也一直没有搞懂为什么要16,帮助文档也是这么写的,那就按照帮助文档来吧,具体也就没有深究下去. 在用qpainter绘制准备工作中,如果先将绘制坐标的中心点移动到区域的中心,painter.translate(width / 2, height /…

前言 百分比仪表盘,主要的应用场景是展示销售完成率.产品合格率等,也可以作为一个进度百分比展示,可以独立设置对应的标题文字,标题文字的颜色和整体的颜色都可以单独设置,建议设置成统一的风格,这样会显得更加美观,贴一张星空图作为背景就更美观,本控件也是作为大屏UI界面的一个子控件,用来展示产品的合格率. 实现的功能 1:可设置范围值,支持负数值 2:可设置精确度,最大支持小数点后3位 3:可设置大刻度数量/小刻度数量 4:可设置开始旋转角度/结束旋转角度 5:可设置仪表盘的标题 6:可设置外圆背景/…

做过安防视频监控的同学都清楚,在视频监控系统软件上都可以看到一个云台控制区域,可以对球机进行下下左右等八个方位的运动控制,还可以进行复位,一般都是美工作图好,然后贴图的形式加入到软件中,好处是程序简单,界面美工,主要取决于美工的美图能力,缺点是对于各种分辨率的适应性稍微差点,需要不同的图片切图贴图,除非默认做好的是大图自适应看不出差别,可能大部分人所在的公司都是小公司,一般美工人员比较少甚至没有,都需要程序员一人负责,甚至一开始就要考虑到各种分辨率的应用场景以及后期可能的换肤换色等.之前做过很多…

前言 指南针仪表盘,主要用来指示东南西北四个方位,双向对称两个指针旋转,其实就是360度打转,功能属于简单型,可能指针的绘制稍微难一点,需要计算多个点构成多边形,本系列控件文章将会连续发100+篇,一方面为了锻炼自己的毅力+坚持力,一方面为了宣传自己,如果各位对完整的源码有兴趣可以私聊,也欢迎在文章下面评论提出建议,谢谢! 实现的功能 1:可设置当前度数 2:可设置精确度 3:可设置是否启用动画及步长 4:可设置边框渐变颜色 5:可设置背景渐变颜色 6:可设置加深和明亮颜色 7:可设置指南指北指…

最新版可执行文件 http://pan.baidu.com/s/1i491FQP 不定期增加控件及修正BUG和改进算法. 总图: 1:动画按钮 * 1:可设置显示的图像和底部的文字 * 2:可设置普通状态图片 * 3:可设置进入状态图片 * 4:可设置离开状态图片 * 5:按照比例自动居中绘制 2:柱状标尺控件 * 1:可设置精确度(小数点后几位)和间距 * 2:可设置背景色/柱状颜色/线条颜色 * 3:可设置长线条步长及短线条步长 * 4:可启用动画及设置动画步长 * 5:可设置范围值 * 6…

现在的web发展越来越快,很多流行的布局样式,都是从web开始的,写惯了Qt widgets 项目,很多时候想改进一下现有的人机交互,尤其是在现有的按钮上加一些动画的效果,例如鼠标移上去变大,移开还原. Qt编写自定义控件还是非常方便和非常强大的,数量掌握Qpainter的各种绘制,自定义任意控件几乎都不是难题,只有想不到,没有做不到. 贴一张个人认为做的比较炫的UI界面: 如果工控项目的界面能够做到这种程序,应该可以让人眼前一亮. 运行效果图: 核心代码: void AnimationButt…

一.前言 现在web形式的图表框架非常流行,国产代表就是echart,本人用过几次,三个字屌爆了来形容,非常强大,而且易用性也非常棒,还是开源免费的,使用起来不要太爽,内置的各种图表和仪表盘等非常丰富,展现形式也是非常多样的. 本次要写的圆弧进度条,就是参考自echart中的一个圆弧进度条,主要结构就是外围一圈圆角进度,中间加上标题和对应进度的百分比,进度条的起始角度和结束角度可以自行调整,这样的话进度条的开口就可以在左边右边上边下边等任意位置,通过调整角度就能实现.绘制的核心就是drawArc…

一.前言 通用移动类,目标就是为了实现放入任意的控件以后,支持鼠标拖动,在容器中或者父类中拖动,这个应用场景非常多,比如在地图上放置的设备,需要用户自行按下拖动到指定的合适的位置,然后保存设备的位置坐标到数据库,下次打开直接加载,在一些安防项目.电力项目.环境监测等上面大量运用,有时候设备对应了多种类型,以前做的办法是将这个移动的代码直接封装在对应设备的自定义控件中,有个巨大缺点就是如果再新增加一个控件,又需要重复的代码加到控件中才行,可否将这个功能独立出来,只要传入控件就行呢,当然可以,比如我…

一.前言 树状导航栏控件是所有控件中最牛逼最经典最厉害的一个,在很多购买者中,使用频率也是最高,因为该导航控件集合了非常多的展示效果,比如左侧图标+右侧箭头+元素前面的图标设置+各种颜色设置等,全部涵盖了,代码量也比较多,该控件前后完善了三年,还提供了角标展示文字信息,纵观市面上web也好,cs架构的程序也好,这种导航条使用非常多,目前只提供了二级菜单,如果需要三级菜单需要自行更改源码才行. 二.实现的功能 1:设置节点数据相当方便,按照对应格式填入即可,分隔符, 2:可设置提示信息 是否显示+…

前言 上次在写可视化数据大屏电子看板项目的时候,为了逐步移除对QChart的依赖(主要是因为QChart真的太垃圾了,是所有Qt的模块中源码最烂的一个,看过源码的人没有一个不吐槽,不仅不支持10W级别的数据量曲线展示,居然一个饼图控件,文字部分的展示还用QLabel来显示的,这么低效率的方式都有),起初曲线图和柱状图等都用QCustomPlot替代了,就剩一个饼图需要自己用无敌的QPainter来绘制了,绘制对应的背景区域难度不大,稍微会用QPainter的人都可以实现,用的就是drawPie绘…

从2010年进入互联网+智能手机时代以来,各种各样的APP大行其道,手机上面的APP有很多流行的元素,开关按钮个人非常喜欢,手机QQ.360卫士.金山毒霸等,都有很多开关控制一些操作,在Qt widgets应用项目上,在项目中应用些类似的开关按钮,估计也会为项目增添不少新鲜感. 总结了大部分的开关按钮控件,基本上有两大类,第一类是纯代码绘制,这种对代码的掌控度要求比较高,但是灵活性比较好.第二类是贴图,专业的美工做好的各种状态的背景图片,只需要用代码将该图片画到界面上即可.为了能够涵盖两大类的开…

转自http://www.cnblogs.com/hdjjun/archive/2011/10/12/2209467.html 代码为自己编写 目标:实现textview和ImageButton组合,可以通过Xml设置自定义控件的属性. 通过代码或者通过xml设置自定义控件的属性 1.控件布局:以Linearlayout为根布局,一个TextView,一个ImageButton.  Xml代码 < ?xml version="1.0" encoding="utf-8&q…

前言: 前两篇介绍了自定义控件的基础原理Android自定义控件之基本原理(一).自定义属性Android自定义控件之自定义属性(二).今天重点介绍一下如何通过自定义组合控件来提高布局的复用,降低开发成本,以及维护成本. 自定义控件相关文章地址: Android自定义控件之基本原理 Android自定义控件之自定义属性 Android自定义控件之自定义组合控件 Android自定义控件之自定义ViewGroup实现标签云 使用自定义组合控件的好处? 我们在项目开发中经常会遇见很多相似或者相同的布…