【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，一经查实，立即删除！

相关文章

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&…
阅读更多...
从零开始：疾控中心实验室装修攻略，让你的实验室一步到位！

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

在当今充满挑战和变化的世界中&#xff0c;疾病的控制和预防成为了人类生存与发展的重要课题。而疾控中心作为防控疾病的核心机构&#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系统可直接与各个厂家生产的多种标准外围器…
阅读更多...
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<…
阅读更多...
牛客练习赛126(O(n)求取任意大小区间最值)

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

牛客练习赛126(O(n)求取任意大小区间最值) 牛客练习赛126 A.雾粉与签到题 题意&#xff1a;给出长度为n的数组, 顺序选出任意三个元素&#xff0c;最小化第二个元素 思路&#xff1a; 遍历除了第一个和最后一个元素取最小值即可 AC code&#xff1a; void solve() {int…
阅读更多...
使用 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
阅读更多...
inflight 守恒和带宽资源守恒的有效性

inflight 守恒和带宽资源守恒的有效性

接着昨天的问题&#xff0c;inflight 守恒的模型一定存在稳定点吗&#xff1f;并不是。如果相互抑制强度大于自我抑制强度&#xff0c;系统也会跑飞&#xff1a; 模拟结果如下&#xff1a; 所以一定要记得 a < b。 比对前两个图和后两个图的 a&#xff0c;b 参数关系&am…
阅读更多...
PS初级｜写在纸上的字怎么抠成透明背景？

PS初级｜写在纸上的字怎么抠成透明背景？

前言 上一次咱们讲了很多很多很多的抠图教程&#xff0c;这次继续。。。最近有小伙伴问我&#xff1a;如果是写在纸上的字&#xff0c;要怎么把它抠成透明背景。 这个其实很简单&#xff0c;直接来说就是选择通道来抠。但有一点要注意的是&#xff0c;写在纸上的字&#xff0…
阅读更多...
鸿蒙开发的南向开发和北向开发

鸿蒙开发的南向开发和北向开发

鸿蒙开发主要分为设备开发和应用开发两个方向&#xff0c;也叫南向开发和北向开发&#xff1a; 鸿蒙设备开发(南向开发&#xff09;&#xff0c;要侧重于硬件层面的开发&#xff0c;涉及硬件接口控制、设备驱动开发、鸿蒙系统内核开发等&#xff0c;目的是使硬件设备能够兼容并…
阅读更多...
android antirollback verno 获取方法

android antirollback verno 获取方法

ReadRollbackIndex.exe 获取 调查avbVBMeta结构体 typedef struct AvbVBMetaImageHeader { /* 0: Four bytes equal to "AVB0" (AVB_MAGIC). */ uint8_t magic[AVB_MAGIC_LEN]; /* 4: The major version of libavb required for this header. */ uint32_t…
阅读更多...
美团面试：百亿级分片，如何设计基因算法？

美团面试：百亿级分片，如何设计基因算法？

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的架构类/设计类的场景题&#xff1a; 1.说说分库分表的基因算法&#xff1f…
阅读更多...
react native中内容占位效果

react native中内容占位效果

react native中内容占位效果 效果实例图实例代码skeleton.jsx 效果实例图 实例代码skeleton.jsx import React, { useEffect, useRef } from "react"; import { Animated, StyleSheet, View } from "react-native"; import { pxToPd } from "../../.…
阅读更多...
寻找python库的安装路径

寻找python库的安装路径

以pip库为例 要找到并修改 pip 库中的 __pip-runner__.py 文件&#xff0c;您可以按照以下步骤操作&#xff1a; 找到 pip 库的安装路径&#xff1a; 通常&#xff0c;Python 库会安装在您的虚拟环境或全局 Python 包目录中。您可以通过以下命令来找到 pip 库的路径&#xff1…
阅读更多...
代码随想录算法训练营day31|455.分发饼干、376.摆动序列、53.最大子序和

代码随想录算法训练营day31|455.分发饼干、376.摆动序列、53.最大子序和

分发饼干 455. 分发饼干 - 力扣&#xff08;LeetCode&#xff09; 贪心算法&#xff0c;让每个饼干给到能够满足的孩子&#xff0c;所以需要对饼干尺寸和孩子的满足值先进行排序&#xff0c;然后针对每一个饼干的尺寸&#xff0c;挑选恰好能够满足的孩子&#xff08;这里表述…
阅读更多...
期末成绩怎么单独发给家长

期末成绩怎么单独发给家长

想知道如何让成绩查询变得简单又安全吗&#xff1f;跟着我&#xff0c;带你发现一个让家长和老师都省心的神器&#xff01; 传统的成绩发布方式&#xff0c;一张张成绩单&#xff0c;一封封邮件&#xff0c;或是一条条短信&#xff0c;这些方法虽然有效&#xff0c;但效率不高&…
阅读更多...
[论文笔记]AIOS: LLM Agent Operating System

[论文笔记]AIOS: LLM Agent Operating System

引言 这是一篇有意思的论文AIOS: LLM Agent Operating System&#xff0c;把LLM智能体(代理)看成是操作系统。 基于大语言模型(LLMs)的智能代理的集成和部署过程中存在着许多挑战&#xff0c;其中问题包括代理请求在LLM上的次优调度和资源分配&#xff0c;代理和LLM之间在交互…
阅读更多...
C#上位机开发

C#上位机开发

目录 一、上位机简介二、C#语法三、新建VS工程四、WinForm控件4.1 属性4.2 事件4.3 窗体方法4.4 常用控件4.5 布局 五、Serial上位机5.1 UI界面设计5.2 功能设计 六、项目打包成安装包6.1 前提准备6.2 打包步骤 一、上位机简介 在单片机项目开发中&#xff0c;上位机也是一个很…
阅读更多...
vue3设置全局变量并获取 全局响应式变量 窗口大小

vue3设置全局变量并获取 全局响应式变量 窗口大小

设置 js文件统一管理全局变量 方法1 app provide() 全局提供变量 通过inject()使用 方法2 app实例配置全局变量 获取 通过 getCurrentInstance.appContext.config.globalProperties.$innerWidth访问到 code import { ref } from vue export const useGlobalState () > {c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023