创建组件 在项目所在目录下执行: ionic g component <ComponentName> 在src/components中会出现: --components |--ComponentName |--ComponentName.html |--ComponentName.scss |--ComponentName.ts |--components.module.ts 组件模块: ComponentName.html <div class="progress-outer…

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

摘要:介绍如何编写自定义的控件,用在报表的窗体上(如Edit,Button等)   Writing Custom Common Controls 编写自定义控件 FastReport contains a set of common controls which can be placed on dialogue forms inside reports. They are as follows: FastReport包含以下控件,用于报表里的对话形式窗体. TfrxLabelControl T…

接上文:编写Qt Designer自定义控件(一)——如何创建并使用Qt自定义控件 既然是控件,就应该有界面,默认生成的控件类只是一个继承了QWidget的类,如下: #ifndef LOGLATEDIT_H #define LOGLATEDIT_H #include <QWidget> class LogLatEdit : public QWidget { Q_OBJECT public: LogLatEdit(QWidget *parent = 0); }; #endif 我们需要的是如下…

这套控件陆陆续续完善了四年多,目前共133个控件,除了十几个控件参考网友开源的代码写的,其余全部原创,在发布之初就有打算将动态库开放出来永久免费使用,在控件比较完善的今天抽了半天时间编译了多个qt版本的动态库,和头文件一起打包放在百度网盘. 控件介绍 超过130个精美控件,涵盖了各种仪表盘.进度条.进度球.指南针.曲线图.标尺.温度计.导航条.导航栏,flatui.高亮按钮.滑动选择器.农历等.远超qwt集成的控件数量. 每个类都可以独立成一个单独的控件,零耦合,每个控件一个头文件和一个实现文件…

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

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

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

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

前言 自定义可拖动多边形控件,原创作者是赵彦博(QQ:408815041 zyb920@hotmail.com),创作之初主要是为了能够在视频区域内用户自定义可拖动的多个区域,即可用来作为警戒区域,也可用来其他的处理,拿到对应的多边形坐标集合,本控件的主要难点是如何计算一个点在一个多边形区域内,何时完成一个多边形区域,支持多个多边形. 实现的功能 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…

一.前言 对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦,而通过渐变色产生的质感色彩反而没有扁平化来得亲切. Flat UI是基于Bootstrap之上进行二次开发的扁平化前端框架,他提供了动感.时尚的风格色调搭配,简洁.炫丽的功能组件,同时还提供了更为平滑的js交互动画,可以称得上前端扁平化设计框架的优秀代表之一. 既然是扁平化设计框架的优秀代表,当然需要在自己项目中应用应用,本人…

一.前言 代码行数统计主要用来统计项目中的所有文件的代码行数,其中包括空行.注释行.代码行,可以指定过滤拓展名,比如只想统计.cpp的文件,也可以指定文件或者指定目录进行统计.写完这个工具第一件事情就是统计了一下自己写过的最大的项目大概多少行代码,看下是不是传说中的一行代码一块钱,这个最大的项目从2010年开始的,到现在差不多快10年了,是自己在现在公司写过的最大的项目,一直在升级更新完善,途中重构过两次,大的结构改动,统计了下好像有15W行左右的代码,纯代码大概在10W,其余是空行和注释行,着…

一.前言 这个IP地址输入框控件,估计写烂了,网上随便一搜索,保证一大堆,估计也是因为这个控件太容易了,非常适合新手练手,一般的思路都是用4个qlineedit控件拼起来,然后每个输入框设置正则表达式过滤只能输入3位数字,然后安装事件过滤器识别回车自动跳到下一个输入框.关于如何设置正则表达式过滤,这个可以搜索查到,本人也不大懂这个规则,貌似还有专门的书籍专门介绍正则表达式,可能这块非常强大. 开源地址:https://gitee.com/feiyangqingyun/QWidgetDemo ht…

一.前言 在之前的一篇文章中写过一个通用的移动控件,作用就是用来传入任意的widget控件,可以在父类容器中自由移动.本篇文章要写的是一个通用的无边框类,确切的说这不叫控件应该叫组件才对,控件是要看得见的东西,有绘制需求的,而这个需要依附在控件上.在我们平时做的项目中,为了U界面的美观,很多会采用自定义无边框窗体来处理,自己美化标题栏等,都会面临一个相同的问题,就是设置好自定义无边框窗体以后,要自己处理窗体的移动和拉伸,如果有多个无边框窗体,很多人会想到每个地方都写重复的代码来实现移动或者拉伸,…

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

一.前言 操作系统的更新迭代速度非常快,基本上三五年就有个新版本出来,WIN10操作系统还是一个比较成功的系统,据说现在市场份额越来越大,XP的份额已经很小,WIN7的份额也在逐步减少,在最新的WIN10系统中,右下角有个日历控件,还是自带农历的,这个本地化做的蛮好的,鼠标移上去还有光晕背景效果,体验非常赏心悦目,于是打算用Qt也高仿一个. 本控件的技术难点有两个,一个是根据当前月份自动排列星期和日期,这个需要自动计算的,难点二是绘制光晕背景,需要用到painter中的图像叠加模式setComp…

一.前言 垂直时间轴控件,主要用来描述企业发展历程大事件,或者软件版本迭代历史等,通过时间节点和事件描述来直观的展示发展的过程,一般在web网页或者app中经常看到此类控件,尤其是公司的官网关于公司部分,着重在一些独角兽公司或者正处于蓬勃发展的公司,用来展示自己多牛逼,发展多么迅猛等. 垂直时间轴控件主要存储的数据包含两个,一个是时间节点,一个是事件描述,为了后期的拓展性,采用结构体来存放这个数据,比如后期还可能增加该事件是否属于重大事件标记,是的话则绘制的时候突出显示比如加大字号加粗,本控件的…

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

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

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

一.前言 这个控件源自于一个音乐播放器,在写该音乐播放器的时候,需要将音频的数据转换成对应的频谱显示,采用的fmod第三方库来处理(fmod声音系统是为游戏开发者准备的革命性音频引擎,非常强大和牛逼),fmod负责拿到音频数据对应的采样频谱数据,然后传给这个控件进行绘制即可,本控件主需要专注于绘制即可,这样fmod对应封装的类专注于音频采集等处理,实现了隔离,修改和增加功能比较方便,声音波形图控件除了可以设置采样的深度以外,还支持三种数据样式展示,线条样式.柱状样式.平滑样式.为了可以直接定位到…