Qt自定义控件之仪表盘1--简单的贴图仪表盘
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--简单的贴图仪表盘的更多相关文章
- Qt自定义控件之仪表盘2--QPaint绘制仪表盘
0.前言 前面一篇文章写道了仪表盘的特点,实现了一个贴图的仪表盘,属于低配版本的仪表盘. 主要是有任何改动时候就需要重新设计图片,不能适配不同控件大小,即使让它自由拉伸,但仪表盘放大缩小时候显示 ...
- Qt自定义控件之仪表盘3--雷达扫描图
1.设计思想 雷达扫描图,在影视作品中见到较多,比如飞机雷达.舰艇雷达,有一个扫描线转圈代表雷达一周旋转或一个批次的收发,发现目标就在表盘上标记位置.和汽车仪表盘类似,汽车仪表盘有底盘背景图.同圆.刻 ...
- 学习Qt Charts-创建一个简单的折线图
一.Qt Charts Qt Charts是基于Qt Graphics View实现的一个图表的组件,可以用来在QT GUI程序中添加现在风格的.可交互的.以数据为中心的图表,可以用作QWidget或 ...
- Unity3D ShaderLab 简单的立方体图反射
Unity3D ShaderLab 简单的立方体图反射 反射是着色器模拟现实环境的一个关键因素,它能使我们的着色器渲染效果更加具备视觉冲击,因为他利用了我们周围的环境, 让着色器反射外界的场景信息并将 ...
- jQuery 简单滑动轮播图效果
一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box"> < ...
- 用matplotlib.pyplot画简单的折线图,直方图,散点图
#coding=utf-8 """ 用matplotlib.pyplot画简单的折线图,直方图,散点图 """ import matplot ...
- JS---案例:简单轮播图
案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...
- UML简单介绍—类图详解
类图详解 阅读本文前请先阅读:UML简单介绍—类图这么看就懂了 1.泛化关系 一个动物类: /** * 动物类 */ public class Animal { public String name; ...
- Qt自定义控件大全(一)云台仪表盘控件
做过安防视频监控的同学都清楚,在视频监控系统软件上都可以看到一个云台控制区域,可以对球机进行下下左右等八个方位的运动控制,还可以进行复位,一般都是美工作图好,然后贴图的形式加入到软件中,好处是程序简单 ...
随机推荐
- 禁用rm命令
(1)[root@tf ~]# alias rm='echo do not use rm command'[root@tf ~]# vim /etc/profile alias rm='echo ...
- Flutter vs React Native vs Native:深度性能比较
老孟导读:这是老孟翻译的付费文章,文章所有权归原作者所有. 欢迎加入老孟Flutter交流群,每周翻译2-3篇付费文章,精彩不容错过. 原文地址:https://medium.com/swlh/flu ...
- asp.net core 发布包含文件
这样这个文件在发布的时候,就会包含进去了.
- 编辑器之神_vim
01vim简介 1.什么是vim: 文本编辑器 2.vim特点: 没有图形界面;只能是编辑文本内容;没有菜单 ;只有命令 3.在很多linux发行版中,直接把vi作为vim的软连接 02打开和新建文件 ...
- redis-cli
redis-cli --stat //监控key的数量,内存占用 redis-cli --scan //列出所有的key redis-cli --bigkeys //列出占用内存较大的key redi ...
- 每日一题 - 剑指 Offer 53 - I. 在排序数组中查找数字 I
题目信息 时间: 2019-07-04 题目链接:Leetcode tag:二分查找 哈希表 难易程度:简单 题目描述: 统计一个数字在排序数组中出现的次数. 示例1: 输入: nums = [5,7 ...
- 每日一题 - 剑指 Offer 30. 包含min函数的栈
题目信息 时间: 2019-06-24 题目链接:Leetcode tag:栈 难易程度:简单 题目描述: 定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的 min 函数在该栈中,调用 m ...
- 看球的巴士——线性dp
[题目描述] 两个球队的支持者要一起坐车去看球,他们已经排成了一列.我们要让他们分乘若干辆巴士,同一辆巴士上的人必须在队伍中是连续的.为了在车上不起冲突,希望两队的支持者人数尽量相等,差至多是D.有一 ...
- web网页多语言的实现方案_前端实现多语言切换
实现的效果 需要在web中实现多语言的切换,当用户语言切换完成后下次重新打开网页,也是上次设置的语言进行显示. 资源网站搜索大全https://55wd.com 实现步骤 1.在用户点击切换语言后,把 ...
- css3条件判断_@supports的用法/Window.CSS.supports()的使用
为了判断浏览器是否支持css3的一些新属性样式,当不兼容该样式的时候,我们可以更优雅的降级处理.这就需要使用到css3的条件判断功能:在css中支持@supports标记.或者在js中使用CSS.su ...