码上通QT实战22--趋势页面01-准备图表对象

1、前言

Qt绘图基础

Qt提供了强大的绘图功能，主要通过QPainter类实现。绘图通常在paintEvent事件中完成，需要重写QWidget::paintEvent方法。

常用绘图操作

QPainter支持多种绘图操作，包括绘制线条、矩形、椭圆、文本等。可以通过设置画笔（QPen）和画刷（QBrush）来控制颜色和样式

cpp 复制代码

void paintEvent(QPaintEvent *) {
    QPainter painter(this);
    
    // 设置画笔
    QPen pen(Qt::red, 2, Qt::DashLine);
    painter.setPen(pen);
    
    // 绘制椭圆
    painter.drawEllipse(50, 50, 100, 50);
    
    // 设置画刷
    painter.setBrush(Qt::green);
    painter.drawRect(150, 50, 100, 100);
    
    // 绘制文本
    painter.drawText(50, 150, "Hello, Qt!");
}

核心绘图类

‌QPainter ‌：绘图引擎，提供drawLine()、drawRect()等函数。
‌QPen‌：定义线条样式（颜色、宽度、虚线等）。
‌QBrush‌：设置填充颜色或渐变。
‌绘图设备‌：QWidget、QPixmap等，作为绘图目标。

绘制自定义图形

对于复杂图形，可以使用QPainterPath类创建路径，然后通过QPainter绘制。

cpp 复制代码

void paintEvent(QPaintEvent *) {
    QPainter painter(this);
    QPainterPath path;
    
    path.moveTo(50, 50);
    path.lineTo(100, 100);
    path.cubicTo(150, 50, 200, 150, 250, 100);
    
    painter.drawPath(path);
}

双缓冲技术

为了避免绘图时的闪烁问题，可以使用双缓冲技术。通过先在QPixmap上绘图，再将结果绘制到窗口上。

使用OpenGL加速

对于高性能绘图需求，可以使用QOpenGLWidget替代普通的QWidget，利用硬件加速提升性能。

cpp 复制代码

#include <QOpenGLWidget>
#include <QOpenGLFunctions>

class GLWidget : public QOpenGLWidget, protected QOpenGLFunctions {
protected:
    void initializeGL() override {
        initializeOpenGLFunctions();
        glClearColor(0.0f, 0.5f, 1.0f, 1.0f);
    }
    
    void paintGL() override {
        glClear(GL_COLOR_BUFFER_BIT);
        glBegin(GL_TRIANGLES);
        glVertex2f(-0.5f, -0.5f);
        glVertex2f(0.5f, -0.5f);
        glVertex2f(0.0f, 0.5f);
        glEnd();
    }
};

动画效果实现

通过结合QTimer和绘图功能，可以实现简单的动画效果。在定时器的timeout信号中更新状态并触发重绘

图形视图框架

对于更复杂的图形应用，可以使用Qt的Graphics View框架（QGraphicsView、QGraphicsScene和QGraphicsItem）。这个框架提供了更高级的图形管理功能。

cpp 复制代码

#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsRectItem>

int main(int argc, char *argv[]) {
    QApplication a(argc, argv);
    
    QGraphicsScene scene;
    QGraphicsRectItem *rect = scene.addRect(0, 0, 100, 100);
    rect->setBrush(Qt::blue);
    
    QGraphicsView view(&scene);
    view.show();
    
    return a.exec();
}

qt绘图系统详解

2、这么干

1、UI布局

QSS（Qt Style Sheets）是Qt框架中用于自定义控件外观的样式表语言，类似于CSS（Cascading Style Sheets）。通过QSS，开发者可以修改控件的颜色、字体、边框、背景等属性，实现界面美化与主题切换。

QSS语法与CSS高度相似，由选择器和声明块组成：

cpp 复制代码

QPushButton {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
}

选择器 ：指定目标控件（如QPushButton）。
声明块 ：包含一组属性-值对（如background-color: #4CAF50;）

常用QSS属性

背景与颜色

background-color：设置背景色。
color：设置文本颜色

cpp 复制代码

QLabel {
    background-color: #333;
    color: white;
}

边框与圆角

border：设置边框样式（如1px solid gray）。
border-radius：设置圆角半径

cpp 复制代码

QPushButton {
    border: 2px solid #555;
    border-radius: 10px;
}

字体与文本

font-family：设置字体（如Arial）。
font-size：设置字号（如12pt）。

cpp 复制代码

QComboBox {
    font-family: "微软雅黑";
    font-size: 14px;
}

选择器类型

类选择器，ID选择器，状态选择器

优先级：ID选择器 > 类选择器 > 继承样式。

通过合理使用QSS，可以快速实现Qt应用的界面定制化需求。

2、定义图象变量

QSplineSeries 概述

QSplineSeries 是 Qt Charts 模块中的一个类，用于绘制平滑的样条曲线（Spline）。它继承自 QLineSeries，通过插值算法将数据点连接为平滑曲线，适用于需要展示连续趋势的场景，如股票走势、传感器数据等。

关键特性

平滑曲线：基于三次样条插值算法，自动生成平滑过渡的曲线。
数据绑定：支持动态添加、删除或修改数据点，曲线自动更新。
自定义样式：可设置线条颜色、宽度、点标记样式等。

QChartView 概述

QChartView 是 Qt Charts 模块中的一个组件，用于显示图表（QChart）。它继承自 QGraphicsView，提供了交互式图表的视图功能，支持缩放、平移等操作，适用于数据可视化场景。

QChartView 默认支持以下交互：

鼠标滚轮缩放：通过滚动鼠标滚轮缩放图表。
鼠标拖动平移：按住鼠标左键拖动可平移图表。
右键复位：右键单击恢复原始视图

QValueAxis 概述

QValueAxis 是 Qt Charts 模块中的一个类，用于在图表中显示数值类型的坐标轴。它适用于需要显示连续数值范围（如时间序列、温度变化等）的场景，支持自定义刻度、标签格式和范围调整。

通过构造函数创建实例，并将其关联到图表（QChart）的 X 轴或 Y 轴：

QDateTimeAxis 概述

QDateTimeAxis 是 Qt Charts 模块中的一个类，用于在图表中显示基于日期和时间的坐标轴。它继承自 QAbstractAxis，支持将时间数据作为横轴（X轴）或纵轴（Y轴），适用于需要时间序列可视化的场景，如股票走势、传感器数据记录等。

通过灵活配置 QDateTimeAxis，可以高效实现时间序列数据的直观展示

3、生成图像

cpp 复制代码

#include "trendview.h"
#include "ui_trendview.h"
#include <QGridLayout> 

TrendView::TrendView(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::TrendView)
{
    ui->setupUi(this);
    //拆线图的初始化
    // x轴(时间轴方式)
    axisX = new QDateTimeAxis();                                        // x轴显示标题
    axisX->setGridLineVisible(false);                                   // 隐藏背景网格X轴框线
    axisX->setFormat("mm:ss");                                          // x轴格式
    axisX->setLabelsAngle(0);                                           // x轴显示的文字倾斜角度
    axisX->setTickCount(20);                                            // X轴上点的个数
    axisX->setRange(curDateTime.addSecs(-20), curDateTime);             // 范围
    axisX->setLabelsColor(QColor(70,70,70,90));  //设置x轴的标签颜色，就是显示的文字颜色
    axisX->setLinePen(QPen(Qt::lightGray, 0.6, Qt::SolidLine)); //设置X轴线的类型及颜色
    axisX->setLabelsFont(QFont("YaHei",9));

    // y轴
    axisY = new QValueAxis();
    axisY->setRange(-20, 110);                                             // 范围
    axisY->setTickCount(14);                                            // y轴上点的个数
    axisY->setGridLineVisible(true);                                   // 不隐藏背景网格Y轴框线
    axisY->setLabelsColor(QColor(70,70,70,90));//显示的文字颜色
    axisY->setLineVisible(false);
    axisY->setGridLinePen(QPen(QColor(0,0,0,40), 0.6, Qt::DashLine));
    axisY->setLabelsFont(QFont("YaHei",9));//刻度标签的字体

    // 图表
    QChart *chart = new QChart();
    chart->setAnimationOptions(QChart::SeriesAnimations);               // 动画方式
    chart->legend()->setVisible(false);//图例关闭
    chart->setBackgroundVisible(false);//背景色关闭
}

TrendView::~TrendView()
{
    delete ui;
}

4、运行测试

5、小结

Qt绘图技术的核心是‌QPainter类 ‌，它能绘制几何图形、图像和文字，支持自定义样式和反锯齿效果。所有绘图操作必须在paintEvent()函数中完成，这是Qt的绘图事件处理机制。

复制代码

原创不易，打字不易，截图不易，撸码不易，整理不易，走过路过，不要错过，欢迎点赞，收藏，转载，复制，抄袭，留言，灌水，请动动你的金手指，祝您早日实现财务自由。