0、前言

学程序首先要输出hell world,学电子要先来个流水灯。学Qt,那就必须先来个自定义控件,若有人问我从哪个下手,我推荐仪表盘,可简可繁,从低配到高配齐全,可入门也可进阶。

1、仪表盘解析

以常见的、传统的仪表盘为例,分解仪表盘的元素,主要有边框、刻度、数字、指针(或数字值、代替指针或二者都有)。边框就是背景图,可以动态的绘出也可以用一个图片贴图,指针可以绘出也可以用图片旋转来实现。其他的有刻度、数字、以及随着数值变化而引起的特效。

2、贴图的仪表盘

贴图仪表盘比较简单。实现方式:先找好2张图,一张背景图,带有刻度数字指示的。一张指针图。程序运行的时候旋转指针就可以实现仪表盘动起来的效果。虽然方式很简陋,但在某些场合具有奇特的效果,比如嵌入式场合,大名鼎鼎的迪文工业屏,都是用着这种方式,使用者基本不需要任何编程,只导入两张漂亮的美工图,然后动态控制指针的旋转角度,就可以实现漂亮的仪表盘。

第一步,找资源:

第二步,添加资源文件到qt:

第三步:写dial类,使用painter重绘表盘和指针

#ifndef DIAL_H
#define DIAL_H #include <QWidget> class Dial : public QWidget
{
Q_OBJECT
public:
explicit Dial(QWidget *parent = nullptr); private:
int value;
void paintEvent(QPaintEvent *event); signals: public slots:
void valueChanged(int value);
}; #endif // DIAL_H #include "dial.h"
#include<QPainter>
#include<QDebug> Dial::Dial(QWidget *parent) : QWidget(parent)
{ } void Dial::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
painter.save();
painter.setRenderHint(QPainter::SmoothPixmapTransform, true); //平滑像素图 painter.translate(this->width()/, this->height()/); // 原点定位
QPixmap img = QPixmap(":/image/background.png");
painter.drawPixmap(-img.width()/, -img.height()/, img); // 背景图 QPixmap needle;
needle.load(":/image/needle.png");
painter.rotate(value-);
painter.drawPixmap(-needle.width()/, -needle.height(), needle); // 绘制指针,默认图片针尖在上坐标(0,0),所以移动使针尾坐标为0 painter.rotate(-(value-)); // 恢复旋转,绘制蒙版层
QPixmap overlay = QPixmap(":/image/overlay.png");
painter.drawPixmap(-img.width()/ + , -img.height()/ + , overlay); painter.restore();
} void Dial::valueChanged(int value)
{
this->value = 2.7*value;
update();
}

第四步:调用dial类,把写好的类当做一个控件来使用即可,连接dial的槽函数即可控制表盘。

Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this); this->setStyleSheet("QWidget { background-color:rgb(84, 84, 84); }");
QVBoxLayout *layout = new QVBoxLayout(this); slider = new QSlider(Qt::Orientation::Horizontal,this);
dial = new Dial(this); layout->addWidget(dial);
layout->addWidget(slider); connect(slider, &QSlider::valueChanged, dial, &Dial::valueChanged);
}

3、实现效果

动效图:

4、参考资料

qt 原厂demo ,本文只是使用了其资源文件,免得自己找图片。

欢迎界面搜索dial,自带UI Compontents:Dial Control Example。

Qt自定义控件之仪表盘1--简单的贴图仪表盘的更多相关文章

  1. Qt自定义控件之仪表盘2--QPaint绘制仪表盘

    0.前言 前面一篇文章写道了仪表盘的特点,实现了一个贴图的仪表盘,属于低配版本的仪表盘.    主要是有任何改动时候就需要重新设计图片,不能适配不同控件大小,即使让它自由拉伸,但仪表盘放大缩小时候显示 ...

  2. Qt自定义控件之仪表盘3--雷达扫描图

    1.设计思想 雷达扫描图,在影视作品中见到较多,比如飞机雷达.舰艇雷达,有一个扫描线转圈代表雷达一周旋转或一个批次的收发,发现目标就在表盘上标记位置.和汽车仪表盘类似,汽车仪表盘有底盘背景图.同圆.刻 ...

  3. 学习Qt Charts-创建一个简单的折线图

    一.Qt Charts Qt Charts是基于Qt Graphics View实现的一个图表的组件,可以用来在QT GUI程序中添加现在风格的.可交互的.以数据为中心的图表,可以用作QWidget或 ...

  4. Unity3D ShaderLab 简单的立方体图反射

    Unity3D ShaderLab 简单的立方体图反射 反射是着色器模拟现实环境的一个关键因素,它能使我们的着色器渲染效果更加具备视觉冲击,因为他利用了我们周围的环境, 让着色器反射外界的场景信息并将 ...

  5. jQuery 简单滑动轮播图效果

    一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box">         < ...

  6. 用matplotlib.pyplot画简单的折线图,直方图,散点图

    #coding=utf-8 """ 用matplotlib.pyplot画简单的折线图,直方图,散点图 """ import matplot ...

  7. JS---案例:简单轮播图

    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...

  8. UML简单介绍—类图详解

    类图详解 阅读本文前请先阅读:UML简单介绍—类图这么看就懂了 1.泛化关系 一个动物类: /** * 动物类 */ public class Animal { public String name; ...

  9. Qt自定义控件大全(一)云台仪表盘控件

    做过安防视频监控的同学都清楚,在视频监控系统软件上都可以看到一个云台控制区域,可以对球机进行下下左右等八个方位的运动控制,还可以进行复位,一般都是美工作图好,然后贴图的形式加入到软件中,好处是程序简单 ...

随机推荐

  1. IndentationError: unindent does not match any outer indentation level解决策略

    [亲测有效]Nodepad++/Sublime Text3中Python脚本运行出现语法错误:IndentationError: unindent does not match any outer i ...

  2. Netty 源码解析(九): connect 过程和 bind 过程分析

    原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 今天是猿灯塔“365篇原创计划”第九篇. 接下来的时间灯塔君持续更新Netty系列一共九篇 Netty 源码解析(一): 开始 Netty 源 ...

  3. 从Linux源码看Socket(TCP)Client端的Connect

    从Linux源码看Socket(TCP)Client端的Connect 前言 笔者一直觉得如果能知道从应用到框架再到操作系统的每一处代码,是一件Exciting的事情. 今天笔者就来从Linux源码的 ...

  4. C#利用反射实现简单记事本功能插件

    效果图: 源码下载:https://github.com/doyoulaikeme/DotNetSample

  5. day81 初识drf

    目录 一.web应用模式 二.API接口 1 rpc(远程过程调用/远程服务调用) 2 restful(资源状态转换) 三.RESTful API规范 四.序列化 五.Django Rest_Fram ...

  6. flask 源码专题(七):threading.local和高级

    1.python之threading.local 当每个线程在执行 val.num=1 ,在内部会为此线程开辟一个空间,来存储 num=1 val.num,找到此线程自己的内存地址去取自己存储 num ...

  7. 数据库01 /Mysql初识、基本指令、数据库密码相关、创建用户及授权

    数据库01 /Mysql初识.基本指令.数据库密码相关.创建用户及授权 目录 数据库01 /Mysql初识.基本指令.数据库密码相关.创建用户及授权 1. 数据库概述 2. 数据库管理系统/DBMS ...

  8. A Mountaineer 最详细的解题报告

    题目来源:A Mountaineer (不知道该链接是否可以直接访问,所以将题目复制下来了) 题目如下: D - A Mountaineer Time limit : 2sec / Stack lim ...

  9. git的工作区和暂存区

    目录 备注: 知识点 工作区(Working Directory) 版本库(Repository) 备注: 本文参考于廖雪峰老师的博客Git教程.依照其博客进行学习和记录,感谢其无私分享,也欢迎各位查 ...

  10. VTK根据三维坐标点集生成点云

    一个简单的利用VTK根据三维坐标点集生成点云的例子,仅供参考. 一.环境:vtk-8.1 & vs2013(需自行配置vtk的环境) 二.我所读取的三维坐标点集为txt格式文件,每个点的x,y ...