前言 图片背景时钟控件,是全套控件(目前共145个)中唯一的几个贴图的控件,这个背景要是不贴图,会画到猝死,必须用美工做好的图贴图作为背景,此控件以前学C#的时候写过,后面在写Qt控件的过程中把他移植过来了,其实画法完全一模一样,我能说连代码我都是直接复制粘贴过来改改的吗?所以有过多年编程经验的程序员们都知道,编程都是一通百通的,只要掌握好了一门,或者精通了一门,其他都是水到渠成的事情,基本上学习个把星期都能直接撸的那种,配合F1帮助文档和官方手册,直接手撸起来(各位别多想,是指撸代码). 贴图…

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

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

一.前言 在上一篇文章写了个高仿WIN10系统的光晕日历,这次来绘制一个光晕的时钟,也是在某些网页上看到的效果,时分秒分别以进度条的形式来绘制,而且这个进度条带有光晕效果,中间的日期时间文字也是光晕效果,整体看起来有点科幻的感觉,本控件没有什么技术难点,如果真要有难点的话也就是如何产生这个光晕效果,在使用painter绘制的时候,设置画笔,可以设置brush,brush可以是各种渐变效果,这个就非常强大了,主要有线性渐变.圆形渐变.锥形渐变,这三种渐变用得好,各种效果都得心应手随手拈来. 为了产…

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

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

前言 在很多项目应用中,需要根据数据动态生成对象显示在地图上,比如地图标注,同时还需要可拖动对象到指定位置显示,能有多种状态指示,安防领域一般用来表示防区或者设备,可以直接显示防区号,有多种状态颜色指示,例如布防.撤防.旁路.报警.离线.在线等状态,可以作为一个通用的设备按钮对象使用. 实现的功能 1:可设置防区样式 圆形.警察.气泡.气泡2.消息.消息2 2:可设置防区状态 布防.撤防.报警.旁路.故障 3:可设置报警切换 4:可设置显示的防区号 5:可设置是否可鼠标拖动 效果图 头文件代码…

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

一.前言 几年前就一直考虑过写这个控件了,在9年前用C#的时候,就看到过别人用C#写了个水波效果的控件,挺好玩的,当时看了下代码用的二维数组来存储变换的图像像素数据,自从学了Qt以后,有过几次想要用Qt写一个版本,当时功力尚浅,尝试过了没写成功,我记得还有个用汇编写的dll提供调用,那个效率贼高,用CPU绘制的话效率相对来说低很多.前阵子一个好友-离心泵(QQ:33522)恰巧写了个,我在他的基础上改进了一些功能,增加了一些接口设置,比如提供参数可以控制水波的消失速度,扩散的速度,水波的面积大小…

一.前言 随着移动互联网的盛行,现在手机APP大行其道,每个人的手机没有十几个APP都不好意思说自己是现代人,各种聊天.购物.直播.小视频等APP,有个陌生人社交的APP叫探探,本人用过几次,当然不是去为了找对象,而是纯粹为了好玩研究下他的U设计和软件逻辑流程等,其中有个雷达控件,单击以后可以搜索附近的异性进行配对,这个雷达控件的效果蛮好的,于是手痒琢磨着用Qt来实现一个,毕竟自己写了150多个控件了,已经上瘾了,对各种效果都如鱼得水,看到各种效果都不自然的想到编码思路等. 这个控件的核心其实就…

一.前言 前面几篇文章中的控件基本上难度系数接近0,甚至有凑控件数量的嫌疑,这次必须来一个强悍的控件,本控件难度系数在所有控件中排前五,代码量也不少,头文件都550行,实现文件1600行,为什么这么多呢,其实本控件是由好多个子控件组成的,字母高亮背景类.中间字母分隔类.右侧字母导航类.通讯录按钮类.自定义滚动条类,我在写比较复杂的控件的时候,一般都会逐个功能拆分,然后思考是否该功能可以做成独立的类,这样管理起来比较方便,也方便查看代码. 最开始拿到这个控件需求的时候,也觉得不会简单,要求用纯QW…

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

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

一.前言 本控件主要用来作为一个简单的图片浏览器使用,可以上下翻页显示图片,图片还可以开启过度效果比如透明度渐变,应用场景有查看报警图片运行图片等.此控件非本人原创,来源于网络,我只是修正了好多处BUG,并完善了各种操作方式.比如增加鼠标右键清空.增加背景色.增加键盘翻页.增加移动到第一张/末一张/上一张/下一张 等, 控件没有什么难度,主要就是打开文件夹,自动计算文件夹下的所有文件存储到队列中,队列中可以是图片的完整路径,也可以是图片,可以切换,如果选择内存加载模式则会自动将路径转为图片,这样…

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

一.前言 这个控件一开始打算用样式表来实现,经过初步的探索,后面发现还是不够智能以及不能完全满足需求,比如要在此控件设置多个角标,这个用QSS就很难实现,后面才慢慢研究用QPainter来绘制,我记得当时接到这个定制控件任务的时候是2016年,那时候对QPainter的使用还不是很熟悉,也就是从此控件开始,逐步研究QPainter的绘制,把所有的内置函数都使用一遍,最终用的越来越熟悉,使得后来到了心中有坐标,万物皆painter的境界,可能就像武林中所说的打通了任督二脉吧. 本控件除了可以设置常…

一.前言 这个控件主要是模仿QColorDialog对话框中的颜色选取面板,提供一个十字形状的标识器,鼠标按下开始选取颜色,移动到哪就选择该处的颜色值,对应右侧颜色条放大显示,本控件的难点就是如何绘制一个边缘框限定鼠标只能在此框中移动,还有一个就是如何绘制颜色渐变的背景颜色集合,这里采用的是对每一个像素的高度区域设置不同的开始颜色+中间颜色+结束颜色,作为渐变颜色,然后设置QLinearGradient作为画笔的颜色进行绘制,其实就是假设宽度是100,其实是绘制了100条垂直方向的竖线而形成的效…

一.前言 上次在写大屏数据可视化电子看板系统时候,提到过改造QCustomPlot来实现柱状分组图.横向柱状图.横向分组图.鼠标悬停提示等.这次单独列出来描述,有很多人疑问为啥不用QChart,或者echart等形式,其实这两种方式我都尝试过,比如Qt5.7以后新增的QChart模块,曲线这块,支持数据量很小,而且用法极其不适应,非常别扭,尤其是10W以上数据量的支持,简直是渣渣,优点也是有很多的,比如动画效果,我看过他的完整源码,动画这块处理的非常好,连坐标轴都可以有动画效果,而且支持很多种效…

一.前言 广告轮播这个控件做的比较早,是很早以前定制一个电信客户端时候用到的,该客户端需要在首页展示轮播预先设定好的图片,图片的路径可以自由设定,然后轮播的间隔速度可以自由控制,同时该控件还需要提供两种指示器的风格,一种是迷你型的样式,一种是数字型的样式. 本控件很早就做好了,由于当时的QPainter功力不足,还不是很熟悉QPainter,采用的是效率比较低的直接用现有控件堆积而成,比如指示器采用的QLabel,用样式表来控制对应的形状,指示器所在的底部放一个widget,采用左右布局,然后右…

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

前言 动画按钮组控件可以用来当做各种漂亮的导航条用,既可以设置成顶部底部+左侧右侧,还自带精美的滑动效果,还可以设置悬停滑动等各种颜色,原创作者雨田哥(QQ:3246214072),驰骋Qt控件界多年,雨田哥是我见过的在这块水平相当牛逼的,在我之上,想要什么效果都可以搞出来,大家也可以找他定制控件,物美价廉! 实现的功能 1:可设置线条的宽度 2:可设置线条的颜色 3:可设置线条的位置 上下左右 4:可设置按钮的正常+悬停+选中背景颜色 5:可设置文字的正常+悬停+选中背景颜色 6:切换位置线条…

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

前言 柱状温度计控件,可能是很多人练手控件之一,基本上都是垂直方向展示,底部一个水银柱,中间刻度尺,刻度尺可以在左侧右侧或者两侧都有,自适应分辨率改动,有时候为了美观效果,可能还会整个定时器来实现动画效果,开启动画效果的缺点就是CPU占用会比较高,前阵子有个好友(贾文涛-涛哥)向我推荐了一个opengl绘制的开源东西,QNanoPainter,东西是个好东西,我个人的理解是直接封装了opengl绘制的qpainter,可以使得绘制全部走GPU,这样就可以大大减轻CPU的负担,非常方便,我自己试了…

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

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

前言 进度条标尺控件的应用场景一般是需要手动拉动进度,上面有标尺可以看到当前进度,类似于qslider控件,其实就是qslider+qprogressbar的杂交版本,不过我才用的是纯qpainter绘制的方式,这样非常灵活可靠,继承自qwidget,这个控件属于标尺类控件中的一个,就是在刻度尺控件基础上增加了鼠标按下拖动进度的功能. 实现的功能 1:可设置精确度(小数点后几位)和间距 2:可设置背景色/线条颜色 3:可设置长线条步长及短线条步长 4:可启用动画及设置动画步长 5:可设置范围值…

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

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

一.前言 我们在很多的安装包中,在安装过程中,经常可以在底部看到一个漂亮的进度条,上面悬浮着显示对应的进度,然后底部进度多种颜色渐变展示,Qt自带的进度条或者操作系统的进度条样式,不够炫,这次索性直接来个自定义绘制实现,至于是继承QWidget类还是QProgressBar类,都无所谓,如果是继承自QWidget类的话,就需要自己设置最大值最小值范围值,而继承自QProgressBar的话就可以直接用自带的函数来实现.这次编写的进度条,提示信息的背景色也是和下面的进度颜色完全一致跟着变化的. 二…

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