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

2024-06-08 00:28
文章标签 常见 qt 图表 绘图 动画 总览 qt5

本文主要是介绍【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】实现效果：

这篇关于【QT5】＜总览四＞ QT常见绘图、图表及动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1040729。

相关文章

AI绘图怎么变现？想做点副业的小白必看！

AI绘图怎么变现？想做点副业的小白必看！

在科技飞速发展的今天，AI绘图作为一种新兴技术，不仅改变了艺术创作的方式，也为创作者提供了多种变现途径。本文将详细探讨几种常见的AI绘图变现方式，帮助创作者更好地利用这一技术实现经济收益。 更多实操教程和AI绘画工具，可以扫描下方，免费获取 定制服务：个性化的创意商机 个性化定制 AI绘图技术能够根据用户需求生成个性化的头像、壁纸、插画等作品。例如，姓氏头像在电商平台上非常受欢迎，
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

介绍 R语言的扩展物种堆积图是一种数据可视化工具，它不仅展示了物种的堆积结果，还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异，为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

上回我们学到创建一个地形和一个人物，今天我们实现一下人物实现移动和跳起，依次点击，我们准备创建一个C#文件 创建好我们点击进去，就会跳转到我们的Vision Studio，然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类，继承自MonoBehaviour{private Rigidbo
阅读更多...
JVM 常见异常及内存诊断

JVM 常见异常及内存诊断

栈内存溢出 栈内存大小设置：-Xss size 默认除了window以外的所有操作系统默认情况大小为 1MB，window 的默认大小依赖于虚拟机内存。 栈帧过多导致栈内存溢出 下述示例代码，由于递归深度没有限制且没有设置出口，每次方法的调用都会产生一个栈帧导致了创建的栈帧过多，而导致内存溢出(StackOverflowError)。 示例代码： 运行结果： 栈帧过大导致栈内存
阅读更多...
【QT】基础入门学习

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口int main(int argc, char *argv[]){// argc是命令行参数个数，argv是
阅读更多...
Python QT实现A-star寻路算法

Python QT实现A-star寻路算法

目录 1、界面使用方法 2、注意事项 3、补充说明 用Qt5搭建一个图形化测试寻路算法的测试环境。 1、界面使用方法 设定起点： 鼠标左键双击，设定红色的起点。左键双击设定起点，用红色标记。 设定终点： 鼠标右键双击，设定蓝色的终点。右键双击设定终点，用蓝色标记。 设置障碍点： 鼠标左键或者右键按着不放，拖动可以设置黑色的障碍点。按住左键或右键并拖动，设置一系列黑色障碍点
阅读更多...
使用Qt编程QtNetwork无法使用

使用Qt编程QtNetwork无法使用

使用 VS 构建 Qt 项目时 QtNetwork 无法使用的问题 - 摘叶飞镖 - 博客园 (cnblogs.com) 另外,强烈建议在使用QNetworkAccessManager之前看看这篇文章: Qt 之 QNetworkAccessManager踏坑记录-CSDN博客 C++ Qt开发：QNetworkAccessManager网络接口组件 阅读目录 1.1 通用API函数
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2