【QT5】＜总览四＞ QT常见绘图、图表及动画

文章目录

前言

一、QFile类读写文件

二、QPainter绘简单图形

三、QChart图表

四、QPropertyAnimation属性动画

五、Q_PROPERTY宏简介

六、自定义属性动画

前言

承接【QT5】＜总览三＞ QT常用控件。若存在版权问题，请联系作者删除！

一、QFile类读写文件

1. 作用：读写文件。

2. 文件读写流程：

  • ①找到文件：调用QFileDialog::getOpenFileName(this, "选择文本", "/home/swear")，用户操作界面选择文件，最终函数返回一个字符串（包括了路径和文件名字）
  • ②设置要打开的文件名：调用file.setFileName(fileName);
  • ③打开文件：调用file.open(权限)，返回文件打开是否成功。true代表成功，false代表失败。
  • ④读写文件：调用file.readAll()、file.readLine()、file.write()等函数。
  • ⑤关闭文件：调用file.close()。
  • ⑥删除文件（可选）：调用file.remove()。

3. 注意事项：

  • 上述文件读写流程中①可以省略。直接通过上述的②设置文件的名字。
  • 当open()的参数为QIODevice::ReadWrite时能够创建不存在的文件。

4. 案例演示：

【1】ui设计器：

【2】打开按钮和关闭按钮的槽函数：

/************************************************* 函数：ui中打开按钮的槽* 功能：将原文件的文本显示到textEdit中************************************************/
void Widget::on_pushButton_clicked()
{//1.找到文件位置QString fileName = QFileDialog::getOpenFileName(this, "选择文本", "/home/swear");//2.设置要打开的文件file.setFileName(fileName);//3.打开文件if (!file.open(QIODevice::ReadOnly)){qDebug() << "打开文件失败" << endl;return;}//4.读入文本，放置于textEdit中ui->textEdit->setPlainText(file.readAll());//5.关闭文件file.close();
}
/************************************************* 函数：ui中关闭按钮的槽* 功能：将textEdit中的文本写入到原文件中************************************************/
void Widget::on_pushButton_2_clicked()
{//1.判断文件是否找到，没有文件名则不操作if (file.fileName().isEmpty()){return;}//2.打开文件if (!file.open(QIODevice::WriteOnly)){qDebug() << "打开文件失败" << endl;return;}//3.将textEdit中的文本写入原文件中file.write(ui->textEdit->toPlainText().toUtf8());//5.关闭文件file.close();//6.清空textEditui->textEdit->clear();
}

【3】实现效果：按“打开”按钮，用户选择文件地址后，就会将文本呈现于textEdit内。然后，用户可以编辑这些文本。最后，用户点击“关闭”按钮，textEdit中的文本就会被写入原文件中，并且清空编辑框。

二、QPainter绘简单图形

1. 作用：绘制简单图形。

2. 基本使用：

  • ①声明：在Widget类的头文件中声明虚函数paintEvent()的重写，即void paintEvent(QPaintEvent *event) override;
  • ②实现：在Widget类的cpp文件中实现paintEvent()。
  • ③绘图：在painEvent()函数中创建QPainter类，并调用如下函数绘制简单图形：
//绘制矩形：左上角坐标为(x,y)，宽度w，高度h
paint.drawRect(int x, int y, int w, int h);//绘制多边形
QPolygon polygon;
polygon.setPoints(int nPoints, int firstx, int firsty, ...);
paint.drawPolygon(polygon);//绘制直线：点(x1,y1)与点(x2,y2)相连
paint.drawLine(int x1, int y1, int x2, int y2);//绘制椭圆/圆：左上角坐标为(x,y)，半轴宽度w，半轴高度h
paint.drawEllipse(int x, int y, int w, int h);//绘制文字
QRectF qr(500, 500, 200, 100);//绘制的区域
paint.drawText(qr, Qt::AlignHCenter | Qt::AlignVCenter,"柯同学");//水平对齐并垂直对齐//绘制路径
QPainterPath path;
path.moveTo(20, 80);
path.lineTo(20, 30);
path.cubicTo(80, 0, 50, 50, 80, 80);
paint.drawPath(path);//设置线条宽度、颜色
QPen pen;
pen.setWidth(5);
pen.setColor(QColor(200, 100, 50));
paint.setPen(pen);//设置图形填充
QBrush brush(QColor(200, 100, 50));
paint.setBrush(brush);//设置抗锯齿,线条更光滑
paint.setRenderHint(QPainter::Antialiasing);

3. 制作轮播文字：

【1】Widget.h：

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QTimer>class Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();void paintEvent(QPaintEvent *event) override;private:QFont font;//字体QString textContent;//字体内容int textLength;//字体总长int offset;//轮播文字的偏移量QTimer *timer;//定时器
private slots:void onTimerTimeOut();//定时器槽函数
};
#endif // WIDGET_H

【2】Widget.cpp：

#include "widget.h"
#include <QPainter>
#include <QFontMetrics>
#include <QDebug>Widget::Widget(QWidget *parent): QWidget(parent), offset(0)
{//设置界面大小this->resize(400, 100);//设置文字与格式textContent = "柯总不care各种儿女情长和科研矛盾！";font.setPixelSize(50);//求出字体长度QFontMetrics fontMetrics(font);textLength = fontMetrics.width(textContent);//设置定时器timer = new QTimer(this);connect(timer, SIGNAL(timeout()), this, SLOT(onTimerTimeOut()));timer->start(10);
}Widget::~Widget()
{
}void Widget::paintEvent(QPaintEvent *event)
{//设置painter的属性Q_UNUSED(event)QPainter painter(this);QPen pen;pen.setColor(QColor(48,193,227));painter.setPen(pen);painter.setFont(font);//轮播文字QRectF rectTmp(this->rect());rectTmp.setLeft(this->rect().width() - offset);painter.drawText(rectTmp, Qt::AlignVCenter, textContent);
}void Widget::onTimerTimeOut()
{//更新offsetif (offset < this->rect().width() + textLength) {offset++;}else {offset = 0;}//更新显示this->update();
}

【3】实现效果：

三、QChart图表

1. 作用：制作一个图表。四要素：图表本体、图表视图、坐标轴、曲线。

2. 流程：将坐标轴和曲线加载到图表本体中，再让图表加载到图表视图中。

  • ①修改pro文件：在QT += 后面加上"charts"。
  • ②添加头文件和命名空间：头文件<QChart>和<QChartView>，使用宏"QT_CHARTS_USE_NAMESPACE"展开命名空间。
  • ③创建图表视图：在ui设计器中找到"Graphics View"并拖拽至界面中，右击选择"提升为..."，然后输入"QChartView"后修改名字为"chartView"。
  • ④创建图表本体："QChart *chart = new QChart;"
    • 设置图表的标题和图例是否显示："chart->setTitle(标题文本);"和"chart->legend()->setVisible(true);"
  • ⑤创建坐标轴："QValueAxis *valueAxisX = new QValueAxis;"
    • 设置坐标轴的范围："valueAxisX->setRange(最小值, 最大值);"
    • 设置坐标轴标签及格式："valueAxisX->setTitleText(标签文本)"并且"valueAxisX->setLabelFormat("%d");"
    • 将坐标轴添加到图表中："chart->addAxis(valueAxisX, Qt::AlignBottom);"
  • ⑥创建曲线：
    • 添加头文件：<QSplineSeries>（曲线）或 <QLineSeries>（折线）。
    • 创建曲线对象："QSplineSeries *ss = new QSplineSeries;"
    • 添加曲线的点："ss->append(int x, int y);"
    • 设置曲线颜色："ss->setPen(QPen(QColor::red));"
    • 图标添加曲线："chart->addSeries(ss);"
    • 将曲线的数据与坐标轴相连：ss->attachAxis(valueAxisX);注意：这一步必须在图表添加曲线之后。
  • ⑦将图表放置于图表视图中："ui->chartView->setChart(chart);"

3. 实例结果：

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);this->setLayout(ui->verticalLayout);//创建图表，设置标题和图例QChart *chart = new QChart;chart->setTitle("时间-温度曲线");chart->legend()->setVisible(true);//创建坐标轴，设置坐标轴标签、数据格式QValueAxis *valueAxisX = new QValueAxis;QValueAxis *valueAxisY = new QValueAxis;valueAxisX->setRange(0, 5000);//时间轴valueAxisY->setRange(0, 100);//温度轴valueAxisX->setTitleText("时间/ms");valueAxisY->setTitleText("温度/摄氏度");valueAxisY->setLabelFormat("%.1f");//将坐标轴与图表联系chart->addAxis(valueAxisX, Qt::AlignBottom);chart->addAxis(valueAxisY, Qt::AlignLeft);//创建曲线，添加点QSplineSeries *ss = new QSplineSeries;ss->append(0, 34);ss->append(1000, 58.2);ss->append(2000, 69.88);ss->append(3000, 15.5);ss->append(4000, 25.9);ss->append(5000, 72.78);ss->setName("curve");//将曲线与图表联系，将坐标轴与曲线联系chart->addSeries(ss);ss->attachAxis(valueAxisX);ss->attachAxis(valueAxisY);//将图表加载到图表视图ui->chartView->setChart(chart);
}

四、QPropertyAnimation属性动画

1. 作用：用于创建几何动画、颜色动画和不透明度动画。

2. 说明：除了几何动画在创建对象时直接指明了作用的物体，颜色和不透明度动画需要分别借助QGraphicsColorizeEffect类和QGraphicsOpacityEffect类的对象。在颜色动画中，需要将作用的物体设置颜色效果（调用setsetGraphicsEffect），再创建颜色动画的对象。在不透明度动画中，需要将作用的物体设置颜色效果（调用setsetGraphicsEffect），再创建不透明度动画的对象。

3. 实例演示：

【1】Widget.h中添加以下属性：分别用于几何动画、颜色动画和不透明度动画的对象。

private:Ui::Widget *ui;QPropertyAnimation *geometryAnimation;QPropertyAnimation *colorAnimation;QPropertyAnimation *opacityAnimation;

【2】Widget.cpp：

#include "widget.h"
#include "ui_widget.h"
#include <QGraphicsColorizeEffect>
#include <QGraphicsOpacityEffect>/************************************************************ @函  数：Widget类的构造函数* @功  能：对几何动画、颜色动画和透明度动画对象初始化* @参  数：parent父类对象* @返回值：无*********************************************************/
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);/****************************1.几何动画************************************///创建几何动画对象geometryAnimation = new QPropertyAnimation(ui->geometryWidget, "geometry");//设置几何动画的变换阶段geometryAnimation->setStartValue(QRect(0, 0, 100, 100));//起始值geometryAnimation->setKeyValueAt(0.5, QRect(600, 0, 150, 150));//0.5比例的值geometryAnimation->setEndValue(QRect(0, 0, 200, 200));//终点值//设置几何动画的其他属性geometryAnimation->setDuration(2000);//持续时间：2000msgeometryAnimation->setLoopCount(2);//循环次数：2次geometryAnimation->setEasingCurve(QEasingCurve::OutCubic);//变换的速度模式/****************************2.颜色动画************************************///创建颜色动画对象QGraphicsColorizeEffect *graphicsColorizeEffect = new QGraphicsColorizeEffect(this);ui->colorWidget->setGraphicsEffect(graphicsColorizeEffect);colorAnimation = new QPropertyAnimation(graphicsColorizeEffect, "color");//设置颜色动画的变换属性colorAnimation->setStartValue(QColor(Qt::yellow));colorAnimation->setEndValue(QColor(Qt::darkGray));colorAnimation->setDuration(2000);/****************************3.不透明动画************************************///创建颜色动画对象QGraphicsOpacityEffect *graphicsOpacityEffect = new QGraphicsOpacityEffect(this);ui->opacityWidget->setGraphicsEffect(graphicsOpacityEffect);opacityAnimation = new QPropertyAnimation(graphicsOpacityEffect, "opacity");//设置颜色动画的变换属性opacityAnimation->setStartValue(0.0);//不透明度为0.0最虚opacityAnimation->setEndValue(1.0);//不透明度为1.0最实opacityAnimation->setDuration(4000);
}/************************************************************ @函  数：Widget类的析构函数* @功  能：析构成员变量* @参  数：无* @返回值：无*********************************************************/
Widget::~Widget()
{delete ui;delete geometryAnimation;
}/************************************************************ @函  数：pushButton的槽函数---clicked* @功  能：启动几何动画* @参  数：无* @返回值：无*********************************************************/
void Widget::on_pushButton_clicked()
{geometryAnimation->start();
}/************************************************************ @函  数：pushButton1的槽函数---clicked* @功  能：启动颜色动画* @参  数：无* @返回值：无*********************************************************/
void Widget::on_pushButton_2_clicked()
{colorAnimation->start();
}/************************************************************ @函  数：pushButton3的槽函数---clicked* @功  能：启动不透明度动画* @参  数：无* @返回值：无*********************************************************/
void Widget::on_pushButton_3_clicked()
{opacityAnimation->start();
}

【3】实现效果：

五、Q_PROPERTY宏简介

1. 语法：

其中type、name、READ和Function是必需，其他都是可选。type能够被写成任何的由QVariant支持的类型。

2. 作用：撰写该宏之后，用户无需手动调用setMoney()方法来设置某个对象的属性值。可以通过调用setProperty("money", 200)来设置对象的内部属性richMoney。

3. 案例说明：

【1】自定义Rich类的头文件：

【2】自定义类Rich的源程序：

【3】运行结果分析：

六、自定义属性动画

1. 说明：在本篇第五章中，我们已经知道了如何写一个Q_PROPERTY宏。那么，本章我们基于第五章的例程进一步编写自定义属性动画，让界面中显示的金钱数量从0增长到100。

2. 具体实现：

【1】Widget类的源程序：

【2】实现效果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/24335.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Debezium系列之：记录一次debezium采集tdsql-c数据库数据丢失原因的排查

Debezium系列之：记录一次debezium采集tdsql-c数据库数据丢失原因的排查

Debezium系列之：记录一次debezium采集tdsql-c数据库数据丢失原因的排查 一、背景二、排查数据丢失时间段数据采集情况三、捕获提交异常信息四、定位原因五、解决方案一、背景 debezium采集tdsql-c数据库，偶尔会出现数据丢失的情况，出现多次后决定整个链路排查定位问题二、排…
阅读更多...
UE5 Mod Support 思路——纯蓝图

UE5 Mod Support 思路——纯蓝图

原创作者&#xff1a;Chatouille 核心功能 “Get Blueprint Assets”节点&#xff0c;用于加载未来的mod。用基础类BP_Base扩展即可。打包成补丁&#xff0c;放到Content\Paks目录下&#xff0c;即可让游戏访问到内容。 与文中所写不同的地方 5.1或者5.2开始&#xff0c;打…
阅读更多...
uniapp封装picker选择器组件，支持关键字查询

uniapp封装picker选择器组件，支持关键字查询

CommonPicker.vue组件 路径在 components\CommonPicker.vue <template><view><uni-easyinput v-model"searchQuery" :placeholder"placeholder" /><picker :range"filteredOptions" :range-key"text" v-model&…
阅读更多...
【Kubernetes】k8s中，Deployment、Service（svc）和 Pod 之间的关系

【Kubernetes】k8s中，Deployment、Service（svc）和 Pod 之间的关系

在Kubernetes&#xff08;k8s&#xff09;中&#xff0c;Deployment、Service&#xff08;svc&#xff09;和Pod之间的关系是构建、管理和访问容器化应用程序的核心组件。以下是它们之间的关系&#xff0c;以分点表示和归纳的方式描述&#xff1a; Pod&#xff1a; Pod是Kuber…
阅读更多...
从零开始：疾控中心实验室装修攻略，让你的实验室一步到位！

从零开始：疾控中心实验室装修攻略，让你的实验室一步到位！

在当今充满挑战和变化的世界中&#xff0c;疾病的控制和预防成为了人类生存与发展的重要课题。而疾控中心作为防控疾病的核心机构&#xff0c;其疾控中心实验室设计建设显得尤为重要。下面广州实验室装修公司小编将分享疾控中心实验室设计建设方案&#xff0c;为疾病防控工作提…
阅读更多...
如何复制文件描述符

如何复制文件描述符

在Linux系统编程中&#xff0c;复制文件描述符是一个常见的操作&#xff0c;通常使用dup或dup2函数来实现。 复制文件描述符的主要原理是创建一个新的文件描述符&#xff0c;该描述符与原始描述符共享相同的文件表项。这意味着它们引用同一个打开的文件&#xff0c;可以进行相…
阅读更多...
玩转STM32-通信协议SPI（详细-慢工出细活）

玩转STM32-通信协议SPI（详细-慢工出细活）

文章目录 一、SPI的基础知识1.1 接口定义1.2 单机和多机通信 二、STM32的SPI工作过程2.1 从选择&#xff08;NSS&#xff09;脚管理2.2 时钟相位与极性2.3 SPI主模式2.4 SPI从模式 三、应用实例 一、SPI的基础知识 1.1 接口定义 SPI系统可直接与各个厂家生产的多种标准外围器…
阅读更多...
Python | 开房门（map）

Python | 开房门（map）

常把map称之为映射&#xff0c;就是将一个元素&#xff08;通常称之为key键&#xff09;与一个相对应的值&#xff08;通常称之为value&#xff09;关联起来 通常用**字典dict**实现了映射这种数据结构 字典也是使用{}来包裹&#xff08;set也是{}&#xff09;&#xff0c;每…
阅读更多...
ChatGPT-4o独家揭秘：全国一卷高考语文作文如何轻松斩获满分？

ChatGPT-4o独家揭秘：全国一卷高考语文作文如何轻松斩获满分？

​一、2024年全国一卷高考 二、2018年全国一卷高考 三、2016年全国一卷高考 一、2024年全国一卷高考 技术进步的悖论&#xff1a;我们的问题真的在减少吗&#xff1f; 引言 随着互联网的普及和人工智能的应用&#xff0c;越来越多的问题能够快速得到解答。然而&#xff0c;这引…
阅读更多...
网络空间安全数学基础·同余式

网络空间安全数学基础·同余式

6.1 剩余系&#xff08;掌握&#xff09; 6.2 同余式概念与一次同余式&#xff08;熟练&#xff09; 6.3 中国剩余定理&#xff08;熟练&#xff09; 6.1 剩余系 设m是正整数&#xff0c;模m同余的全体整数是一个模m剩余类&#xff0c;即可表示为a qmr&#xff0c; 0≤r<…
阅读更多...
idea使用和了解

idea使用和了解

官网&#xff1a;IntelliJ IDEA – the Leading Java and Kotlin IDE
阅读更多...
【MyBatisPlus条件构造器】

【MyBatisPlus条件构造器】

文章目录 什么是条件构造器&#xff1f;使用步骤1. 引入 MyBatisPlus 依赖2. 创建实体类3. 使用条件构造器查询4. 执行查询 示例代码 什么是条件构造器&#xff1f; 条件构造器是 MyBatisPlus 提供的一种灵活的查询条件设置方式&#xff0c;它可以帮助开发者构建复杂的查询条件…
阅读更多...
持续总结中！2024年面试必问 20 道分布式、微服务面试题（二）

持续总结中！2024年面试必问 20 道分布式、微服务面试题（二）

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问 20 道分布式、微服务面试题&#xff08;一&#xff09;-CSDN博客 三、CAP定理是什么&#xff1f; CAP定理是分布式系统理论中的一个基本概念&#xff0c;由计算机科学家Eric Brewer在2000年提出&#xff0c;并由…
阅读更多...
常见的api：Runtime Object

常见的api：Runtime Object

一.Runtiem的成员方法 1.getRuntime() 当前系统的运行环境 2.exit 停止虚拟机 3.avaliableProcessors 获取Cpu线程的参数 4.maxMemory JVM能从系统中获取总内存大小(单位byte) 5.totalMemory JVM已经从系统中获取总内大小(单位byte) 6.freeMemory JVM剩余内存大小(…
阅读更多...
数组对象数据修改后页面没有更新，无法进行编辑，校验失效问题

数组对象数据修改后页面没有更新，无法进行编辑，校验失效问题

在 Vue 中&#xff0c;当你通过 Object.assign 或其他方式修改了对象中的某个属性时&#xff0c;Vue 并不会触发组件重新渲染&#xff0c;因此表单中的 input 框无法及时更新。这可能导致在修改表单数据后&#xff0c;页面没有更新&#xff0c;而且表单校验也失效的情况。这是因…
阅读更多...
【MATLAB高级编程】入门篇 | 向量化编程

【MATLAB高级编程】入门篇 | 向量化编程

【入门篇】向量化编程 1. 什么是向量？2. 向量的创建2.1 行向量2.2 列向量2.3 使用冒号运算符2.4 使用`linspace`和`logspace`3. 向量的基本操作3.1 向量元素访问3.2 向量的长度3.3 向量的加法和减法3.4 向量的点乘和叉乘3.5 向量的元素乘法和除法4. 向量的高级操作4.1 逻辑索引…
阅读更多...
牛客练习赛126(O(n)求取任意大小区间最值)

牛客练习赛126(O(n)求取任意大小区间最值)

牛客练习赛126(O(n)求取任意大小区间最值) 牛客练习赛126 A.雾粉与签到题 题意&#xff1a;给出长度为n的数组, 顺序选出任意三个元素&#xff0c;最小化第二个元素 思路&#xff1a; 遍历除了第一个和最后一个元素取最小值即可 AC code&#xff1a; void solve() {int…
阅读更多...
深度学习模型中的 `.clone` 作用分析----针对CUDA可能出现的BUG

深度学习模型中的 `.clone` 作用分析----针对CUDA可能出现的BUG

深度学习模型中的 .clone 作用分析 问题描述与解决 在训练自定义网络结构时出现了两个错误&#xff1a; RuntimeError: CUDA error: device-side assert triggeredRuntimeError: one of the variables needed for gradient computation has been modified by an inplace ope…
阅读更多...
使用 tc (Traffic Control)控制网络延时

使用 tc (Traffic Control)控制网络延时

设置网络延时 1500ms 800ms tc qdisc add dev eth0 root netem delay 1500ms 800msping 测试 ping www.baidu.com取消设置网络延时 sudo tc qdisc del dev eth0 root
阅读更多...
解决splice改变原数组的BUG

解决splice改变原数组的BUG

项目场景&#xff1a; 项目中难免遇到需要删除改变数组的方法&#xff0c;去重&#xff0c;删除不要的数据等 问题描述&#xff1a; 但是splice方法会删除掉数据改变原数组&#xff0c;返回的是改变之后的数组&#xff0c;即使你是赋值的还是会影响到原数组的数据 GoodsInfo…
阅读更多...
最新文章

Copyright @ 2022~2023