void QPainter::scale(qreal sx, qreal sy) { ... d->state->worldMatrix.scale(sx,sy); ... }
❝将图片，自绘形状，文本显示到屏幕时，它们的边缘都有不同的锯齿状，非常不好看。本文介绍一些抗锯齿的操作，让边缘更平滑，看起来好看点，但副作用是会额外的性能问题。❞ 使用QPainter抗锯齿 QPainter painter(this); /* 尽可能消除锯齿边缘 */ painter.setRenderHint(QPainter::Antialiasing); /* 尽可能消除文本锯齿边缘 */ painter.setRenderHint(QPainter::TextAntialiasing); /* 启
介绍 可以在QPaintDevice类上绘制各种图形 QPaintDevice类表示QPainter的绘图设备(画布) QpaintDevice子类有QImage、QOpenGLPaintDevice、QWidget 等 所以, QPainter可以在QImage、QOpenGLPaintDevice、QWidget上进行绘制图形 QPainter只能在类对象的paintEvent()函数中绘制图形 QPainter类的成员角色有: QPen : 用于绘制几何图形的边缘,由颜色,宽度,线风格
渐变有三种：QLinearGradient、QConicalGradient 、 QRadialGradient 它们都有一个QGradient父类 QGradient父类的常用公共函数有： void QGradient::setSpread ( Spread method ); //设置填充梯度区域外的区域,参数有: // QGradient::PadSpread ：填充区域内最接近的停止颜色。这是默认的。 // QGradient::RepeatSpread : 在区域外继续重复填充 // QGrad
30.QT-渐变之QLinearGradient、 QConicalGradient、QRadialGradient
最近想用Qt写一个中国象棋的项目，在网上找了几个例子后，发现关于绘图部分基础为0 ，于是根据项目需要学习一下。查了一些网上的资料，在此总结一下；我比较喜欢的方式是用到什么学什么，或者自己想做一个东西，这样学习起来目的性比较强，可以快速进入。
摘要： 本示例是使用Qt的QPainter的转换和缩放特性简化绘图，绘制一个时钟，里面包含时针、分针、秒针、钟表刻度的绘制。 也包含计时器的使用，以及创建带有栅格表面的自定义窗口。 实现效果如图：
在很多看图软件中，切换图片的时候可以带上动画过渡或者切换效果，显得更人性化，其实主要还是炫一些，比如百叶窗、透明度变化、左下角飞入等，无论多少种效果，核心都是围绕QPainter来进行，将各种动画效果对应的图片的区域动态计算并绘制出来，配合以QPropertyAnimation动画属性产生线性插值，比如渐入飞入时候，可以中间快速两端慢速。目前动画类型有9种，后期还会不断增加。
说到自定义控件，我是感觉特别熟悉的几个字，本人亲自原创的自定义控件超过110个，都是来自各个行业的具体应用真实需求，而不是凭空捏造的，当然有几个小控件也有点凑数的嫌疑，在编写整个数据可视化大屏界面电子看板系统中，也用到了四五个自定义的控件，比如那个环形百分比图，多态进度条，合格率仪表盘，速度仪表盘等，这些控件在现有的类中是没有的，需要用QPainter这个牛逼的工具来绘制，类似于神笔马良似的，给我一个画笔，可以画出任意你想要的图形，好比我常说的心中有坐标，万物皆painter。
在之前的文章里主要介绍了Qt Model/View 的一些基本用法，接下来结合Delegate做最后的说明。
首先，重写绘制事件，需要在头文件加入QPaintEvent头文件，并定义几个变量。
在QTreeView等继承于QAbstractItemView表格中，定制表格样式通常都是通过设置项目代理（ItemDelegate）来实现。在这种实现方法中，每个项目（Item）基本上是孤立的，无法有效判断己身周遭环境。 如果以此种方法来实现圆角样式，行首或许还能通过方法int QModelindex::column()来判断是否属于第一列来断定，然而行尾难道还要通过QAbstractItemModel QModelindex::*model()获取模型（Model）之后再来判断吗？且视图（View）本身可以隐藏、拖拽指定行、列，所以这种方式并不靠谱。 更正： QStyleOptionViewItem提供了获取可视项目位置的接口，可通过
飞行仪表是测定和表示飞机数据的工具，飞机中必不可少的一部分，飞行员根据飞行仪表表示的数据才能正确地做出判断。一般飞机仪表包括高度表+空速表+垂直速率表+姿态仪+航向指示表+转弯协调表。
指南针仪表盘，主要用来指示东南西北四个方位，双向对称两个指针旋转，其实就是360度打转，功能属于简单型，可能指针的绘制稍微难一点，需要计算多个点构成多边形，本系列控件文章将会连续发100+篇，一方面为了锻炼自己的毅力+坚持力，一方面为了宣传自己，如果各位对完整的源码有兴趣可以私聊，也欢迎在文章下面评论提出建议，谢谢！
旋转仪表盘，一般用在需要触摸调节设置值的场景中，其实Qt本身就提供了QDial控件具有类似的功能，本控件最大的难点不在于绘制刻度和指针等，而在于自动计算当前用户按下处的坐标转换为当前值，这个功能想了很久，也看了QDial的源码，他里边写的非常复杂，最后还是参考的我打99分（100分留给自己未来写的书，哈哈！）的Qt书籍《c++ gui qt 4编程》中的篇章才写出来的，关键需要用到atan2将坐标转为值，看来学好数学真的很重要。
导航进度条控件，其实就是支付宝、京东、淘宝订单页面的进度控件，提示当前第几步，总共有几步，然后当前进度特殊颜色显示，每个进度带有时间文字等信息，本控件特意将三种样式风格都集成进去了，京东订单流程样式/淘宝订单流程样式/支付宝订单流程样式，可以动态切换样式，控件自适应任何分辨率，可以自由调整自身大小以适应分辨率的改变，总步骤以及当前步骤都是自动计算占用区域比例，直接提供接口设置步骤对应的文字信息等，接口非常友好。
这个控件主要是模仿QColorDialog对话框中的颜色选取面板，提供一个十字形状的标识器，鼠标按下开始选取颜色，移动到哪就选择该处的颜色值，对应右侧颜色条放大显示，本控件的难点就是如何绘制一个边缘框限定鼠标只能在此框中移动，还有一个就是如何绘制颜色渐变的背景颜色集合，这里采用的是对每一个像素的高度区域设置不同的开始颜色+中间颜色+结束颜色，作为渐变颜色，然后设置QLinearGradient作为画笔的颜色进行绘制，其实就是假设宽度是100，其实是绘制了100条垂直方向的竖线而形成的效果。在绘制画布的时候，可以将其绘制到一个pixmap上，这样也方便待会鼠标移动时候直接取该pixmap的某个像素点的颜色值。
这个控件没有太多的应用场景，主要就是练手，论美观的话比不上之前发过的一个图片时钟控件，所以此控件也是作为一个基础的绘制demo出现在Qt源码中，我们可以在Qt的安装目录下找到一个时钟控件的绘制，甚至还有qml版本，本控件无非就是一个仪表边框加上时钟分钟刻度再加上时分秒指针，打完收工，我是在此基础上增加了可以设置各种颜色，然后鼠标右键可设置四种效果 普通效果/弹簧效果/连续效果/隐藏效果，弹簧效果的意思是秒钟走动的时候，先移动到超过指定位置，然后又重新弹回来，连续效果的意思是将步长减少，一点点的移动，将秒钟的定时器精度调高。还有一个新增的功能是内置了设置系统时间公共槽函数,支持任意操作系统。
进度仪表盘主要应用场景是标识一个任务进度完成的状况等，可以自由的设置范围值和当前值，为了美观还提供了四种指示器（圆形指示器/指针指示器/圆角指针指示器/三角形指示器），各种颜色都可以设置，其中的动画效果采用的QPropertyAnimation类来实现，主要是线性插值法，生成一定规则的数值，用于设定的属性。今天有个朋友需要安卓版本的控件，其实采用qwidget写的控件都可以直接编译就可以到android上，于是直接重新编译了安卓版本，对应的apk已上传到共享文件夹，文末贴出android运行效果图。
圆弧仪表盘在整个自定义控件大全中也稍微遇到了技术难点，比如背景透明，如果采用以前画圆形画扇形的方式绘制，肯定很难形成背景透明，需要用到切割，最后换了一种绘制方法，采用绘制圆弧的方式，即使用drawArc方法，这个方法有个注意点就是值要16，我也一直没有搞懂为什么要16，帮助文档也是这么写的，那就按照帮助文档来吧，具体也就没有深究下去。
高亮按钮控件，既可以作为类似于交通指示灯使用，也可以作为设备状态指示灯使用，控件内置多套颜色风格，还可以自己设置颜色风格，按钮可以增加文字显示，非常适合需要在状态设备上显示小量的文字展示，按钮还可以开启报警，开启后会红黑闪烁，也可以自定义设置报警的两种颜色，除了默认是圆形外，还可以设置成矩形模式，控件写好了作为独立控件拖动使用，这样的话可以将控件作为一个设备，在地图上拖动，用户只需要开启拖动即可，不需要再自己编码。
自定义环形图控件类似于自定义饼状图控件，也是提供一个饼图区域展示占比，其实核心都是根据自动计算到的百分比绘制饼图区域。当前环形图控件模仿的是echart中的环形图控件，提供双层环形图，有一层外圈的环形图，还有一层里边的饼状图，相当于一个控件就可以表示两种类型的占比，这样涵盖的信息量更大，而且提供了鼠标移上去自动突出显示的功能，下面的图例也跟着加粗高亮显示，非常直观，类似的控件在很多web项目中大量运用。
之前写了一篇 浅谈Qt控件绘制 。之所以叫浅谈是因为调用都是比较表层的调用。其实 Qt 的绘制，可以说用 Qt 的人都有用到，但是对于绘制底层，了解的人并不见得很多。我其实之前也是云山雾罩，从来没有深究过。所以想着知其然还是要知其所以然。
上次在写可视化数据大屏电子看板项目的时候，为了逐步移除对QChart的依赖（主要是因为QChart真的太垃圾了，是所有Qt的模块中源码最烂的一个，看过源码的人没有一个不吐槽，不仅不支持10W级别的数据量曲线展示，居然一个饼图控件，文字部分的展示还用QLabel来显示的，这么低效率的方式都有），起初曲线图和柱状图等都用QCustomPlot替代了，就剩一个饼图需要自己用无敌的QPainter来绘制了，绘制对应的背景区域难度不大，稍微会用QPainter的人都可以实现，用的就是drawPie绘制即可，关键是如何在自己所在的区域绘制对应的文字和百分比，这个需要找到对应区域，然后找到合理的位置摆放文字，这个可能就需要用到一点数学知识了，从圆中心开始，给定对应的角度，对应的偏离值，计算偏离值对应的中心点坐标，此坐标作为绘制文字区域的中心，然后四周扩散一定的距离即可。
这个控件取名叫迷你仪表盘，是以为该控件可以缩小到很小很小的区域显示，非常适合小面积区域展示仪表数据使用，还可以手动触摸调节进度，是我个人觉得最漂亮小巧的一个控件。初次看到类似的控件是在一个音乐视频编辑软件中，用来展示左通道右通道音量等，有非常多的类似的迷你仪表盘在整个软件系统中，用户可以直接鼠标滑动调节，以最小的占用区域展示最大的信息，漂亮！
百分比仪表盘，主要的应用场景是展示销售完成率、产品合格率等，也可以作为一个进度百分比展示，可以独立设置对应的标题文字，标题文字的颜色和整体的颜色都可以单独设置，建议设置成统一的风格，这样会显得更加美观，贴一张星空图作为背景就更美观，本控件也是作为大屏UI界面的一个子控件，用来展示产品的合格率。
Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制。整个绘图系统基于QPainter，QPainterDevice和QPaintEngine三个类。
汽车仪表盘几乎是qt写仪表盘控件中最常见的，一般来说先要求美工做好设计图，然后设计效果图给到程序员，由程序员根据效果来实现，主要靠贴图，这种方法有个好处就是做出来的效果比较逼真，和真实效果图基本上保持一致，而且程序员也不会那么累，基本上入门级别的程序员都可以搞定，效率比较高，缺点是如果用户需要更改某个部件的颜色，比如指针的颜色等，需要重新做效果图贴图才能实现，比较麻烦，还有一点就是如果效果图原图不是很大，则遇到特殊分辨率情况下，可能会有失真的情况，被强制拉伸等。
Qt 中提供了强大的 2D 绘图系统，可以使用相同的 API 在屏幕和绘图设备上进行绘制，它主要基于QPainter、QPaintDevice 和 QPaintEngine 这三个类。
多态进度条，顾名思义，有多重状态，其实本控件主要是用来表示百分比进度的，由于之前已经存在了百分比进度条控件，名字被霸占了，按照先来先得原则，只好另外取个别名叫做多态进度条，应用场景是，某种任务有三种状态，比如正常状态、警戒状态、报警状态，这三种状态都分别有一个占比，需要用不同的颜色表示，这样就衍生出了此控件，类似于堆积图。接下来节假日四天，可以全身心投入研发还未完工的大屏UI程序，基础控件部分+二级界面部分都已经做好，现在专心整合到主界面和打通数据流（采用数据库采集+网络采集两种方式）。多态进度条也是为了此项目特意定制的。
这个控件写了很久了，是最早期的一批控件中的一个，和温度计控件类似，都是垂直的进度条，可以设置不同的背景颜色，左侧的刻度也可以自由设定，还提供了动画效果，其实就是开启定时器慢慢的进度到设定的目标值，如果设定的值比当前值大，则递增，反之递减。由于当时的qpainter绘制功底还不够如火纯情，所以当时的刻度尺部分都是定死的字体大小，并不会随着控件变化而增大。
本控件也非原创控件，是参考网上的代码而来的，对称顾名思义就是将画布平均成上下两部分，将设置的值自动按照画布高度的一半作为参照高度进行绘制，然后增加动态过渡效果，有点类似于声音播放时候的频谱效果，一般都会用多个直方对称图组合成一个控件来实现多个效果，看起来会更美观，背景颜色可以设置成渐变的，柱状条的颜色也可以自行设置。
这个控件是近期定制的控件，还是比较实用的控件之一，用户主要是提了三点需求，一点是切换焦点的时候控件放大突出显示，一点是可直接输入或者编辑值，还有一点是支持上下键及翻页键和鼠标滚轮来动态修改值，类似于qspinbox控件。要能够支持直接输入首先想到的就是qlineedit控件，在原有的仪表盘控件上中间部分，放置一个qlineedit控件用来输入值，采用正则表达式来限制只能输入数字，为了使得qlinedit和自定义绘制的仪表盘完全融为一体，必须设置qlineedit的样式为背景透明，至于输入框的位置，有个小技巧就是直接将输入框设置为控件的大小，这样输入的焦点永远在控件的中间，完全混合，丝毫看不出是一个输入框控件插在那里，至于上下键及翻页键和鼠标滚轮，直接安装事件过滤器即可识别到，进行对应的处理即可。
QTabWidget默认tab页标题（tabBar）在上面，但是有时候我们需要改变它的位置，比如做一个设置页面，想将它放到左边显示，这个比较简单，只需要设置一个属性即可实现：tabPosition:west，但是我们发现它文字的方向是没有改变的，这样完全没有使用体验，所以我们需要改变文字的方向。
图片背景时钟控件，是全套控件（目前共145个）中唯一的几个贴图的控件，这个背景要是不贴图，会画到猝死，必须用美工做好的图贴图作为背景，此控件以前学C#的时候写过，后面在写Qt控件的过程中把他移植过来了，其实画法完全一模一样，我能说连代码我都是直接复制粘贴过来改改的吗？所以有过多年编程经验的程序员们都知道，编程都是一通百通的，只要掌握好了一门，或者精通了一门，其他都是水到渠成的事情，基本上学习个把星期都能直接撸的那种，配合F1帮助文档和官方手册，直接手撸起来（各位别多想，是指撸代码）。
直方波形图控件非原创控件，控件大全中大概有20-30个控件非自己原创，而是参考了网上开源的代码，自己加以整理和完善，新增了插件的代码使得可以直接集成到QtDesigner或者QtCreator中。直方波形图，主要就是将外部传入的坐标集合数据进行渐变过渡的绘制，产生一个动态的过渡效果，将设置的坐标集合重新运算+1变成新的坐标集合来绘制，这样看起来绘制不会很死，而是缓慢的过渡。
直方动态图类似于音乐播放时候的柱状图展示，顶部提供一个横线条，当柱状上升的时候，该线条类似于帽子的形式冲到顶端，相当于柱状顶上去的感觉，给人一种动态的感觉，听音乐的同时更加赏心悦目，原理比较简单，就是用2个定时器，一个定时器间隔比较短，负责快速把柱状图从底部冲到设置的值，同时横线条跟随一起冲上去，一个定时器负责慢慢的跌落值到0，然后横线条缓慢下降，下降速度比柱状图的速度要慢一些，产生一种对比的效果，看起来更像是跌落的感觉。
天气仪表盘控件是所有控件中唯一一个使用了svg矢量图的控件，各种天气图标采用的矢量图，颜色变换采用动态载入svg的内容更改生成的，其实也可以采用图形字体来做，本次控件为了熟悉下svg在Qt中的使用，才采用的svg来绘制。
进度条标尺控件的应用场景一般是需要手动拉动进度，上面有标尺可以看到当前进度，类似于qslider控件，其实就是qslider+qprogressbar的杂交版本，不过我才用的是纯qpainter绘制的方式，这样非常灵活可靠，继承自qwidget，这个控件属于标尺类控件中的一个，就是在刻度尺控件基础上增加了鼠标按下拖动进度的功能。
Qt中每一个窗口都有自己的一个坐标系，默认窗口左上角为坐标原点（0,0），然后水平向右依次增大（X轴），垂直向下依次增大（Y轴）。例如：
在各种各样的执行任务界面，有时候需要比较多的时间，需要给出一个直观的等待进度条表示当前正在执行的进度，而不至于懵逼在那里，用户不会觉得程序死了还是干嘛了。
平铺背景控件，主要的应用场景是作为画布出现，黑白相间的背景图，然后上面可以放置图片图形等，使得看起来更美观，比如PS软件新建图层以后的背景，FireWorks软件新建画布以后的透明背景，ICO制作软件新建画布以后的背景，都会采用一个黑白相间的背景。尽管本人用QPainter很多年，后面在翻阅QPainter自带的函数中才发现居然QPainter自带了这个绘制平铺背景的函数，擦，他么叫drawTiledPixmap，Qt不愧是跨平台GUI开发中的佼佼者，这些东西居然都考虑到了，说到考虑的周到，Qt中连size和count和length都完美的封装了，适合不同人群的使用习惯，这个考虑也是非常周到的。drawTiledPixmap就两个参数，第一个参数是要绘制的区域，第二个参数是要绘制的图片，图片不足会自动拷贝填充，所以如果提供的是两个交替颜色的背景图片，就会依次绘制形成平铺背景的效果，为了使得颜色可以控制，本控件增加了交替颜色的设置，可以自行传入两种颜色作为交替颜色，在程序内部自动生成要绘制的图片。
Qt的绘图是在绘图事件中完成的。整个绘图系统基于QPainter，QPainterDevice和QPaintEngine三个类。
在QSS中，我们可以使用Background或者background-color的方式来设置背景色，设置窗口背景色之后，子控件默认会继承父窗口的背景色，如果想要为控件设置背景图片或图标，则可以使用setPixmap或则setIcon来完成。关于这两个函数的用法，可以参考本博客下的PyQt5的基础控件分栏
这个控件源自于一个音乐播放器，在写该音乐播放器的时候，需要将音频的数据转换成对应的频谱显示，采用的fmod第三方库来处理（fmod声音系统是为游戏开发者准备的革命性音频引擎，非常强大和牛逼），fmod负责拿到音频数据对应的采样频谱数据，然后传给这个控件进行绘制即可，本控件主需要专注于绘制即可，这样fmod对应封装的类专注于音频采集等处理，实现了隔离，修改和增加功能比较方便，声音波形图控件除了可以设置采样的深度以外，还支持三种数据样式展示，线条样式、柱状样式、平滑样式。为了可以直接定位到某一位置直接跳转到音频位置，还增加了绘制数线条定位线。
波浪曲线控件，其实是之前一个水波进度条控件的一个核心，其实就是利用正弦曲线来生成对应的坐标进行绘制，把这个功能单独提取出来，是为了更详细的研究各种正弦余弦等拓展效果，当时写这个效果的时候，参考的是网上android绘制的水波效果的代码，然后自己重新理解以后，整理成Qt的版本，拓展了部分效果比如可以设置浪的高度，浪的密度，密度越大越浪，^_^，演示控件效果提供了滑块来设置对应的参数。
按钮进度条，顾名思义，表面上长得像一个按钮，单击以后切换成进度条指示按钮单击动作执行的进度，主要用在一些需要直接在按钮执行动作显示对应进度的场景，在很多网页中经常看到这种效果，这个效果有个优点就是直接在原地显示进度条，不占用其他位置，然后提供各种颜色可以设置。近期大屏电子看板程序接近尾声了，文章末尾贴出几张动图效果。
本控件主要用来作为一个简单的图片浏览器使用，可以上下翻页显示图片，图片还可以开启过度效果比如透明度渐变，应用场景有查看报警图片运行图片等。此控件非本人原创，来源于网络，我只是修正了好多处BUG，并完善了各种操作方式。比如增加鼠标右键清空、增加背景色、增加键盘翻页、增加移动到第一张/末一张/上一张/下一张 等，
在很多菜单导航界面中，当单击了二级菜单或者三级菜单以后，顶部会显示带箭头或者其他标识的导航标签，可以单击该标签快速切换到对应的界面，也作为指示当前处于哪一级菜单下的界面，主要在WEB中大肆流行，在CS架构的项目中也逐渐应用开来，发现现在越来越多的CS开发的程序，都学习和模仿并应用BS架构的程序中好的方面，尤其是UI方面，取长补短，挺好，专业UI设计师的美感比绝大多数程序员的美感要好很多，他们设计出来的效果都是非常棒的，我个人喜欢去UI中国参看学习各种各样的UI设计，看到好的会下载下来，直接搞个拾色器查看颜色，看下人家的颜色配色搭配的多好。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
