Qt下使用QPainter实现界面上饼状图、圆环图的绘制

最新推荐文章于 2024-05-09 16:11:33 发布
最新推荐文章于 2024-05-09 16:11:33 发布
阅读量1.7k 收藏 17
点赞数 5
文章标签： qt QPainter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XCJandLL/article/details/131089682
版权

文章目录

前言

前面的文章有讲述使用Qt下的Charts 模块来进行饼图的绘制：QChart实现ui界面上指定位置饼状图、圆环图的绘制，但是使用过程中并不能很好的实现自己想要的效果，而Qt中的绘图事件可以解决这个问题，所以决定使用QPainter及QPaintEvent来实现饼状图及圆环图的自定义绘制，在这里编写了一个简单的示例，并将相关代码展现出来以便大家学习，如有错误之处，欢迎大家批评指正。

项目效果
请添加图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

一、示例讲解

首先添加相关头文件：

#include <QtMath>   //后文中计算文本位置使用
#include <QPainter>

类中添加paintEvent函数，并在cpp中进行重写（见后文）

protected:
    void paintEvent(QPaintEvent *);

本示例中圆环图各区域数据结构体如下，其中有区域的名称颜色及数量：

struct PieData
{
    QString name;   //名称
    int num;        //数量
    QColor color;   //颜色

    PieData(QString name,int num,QColor color)
    {
        this->name = name;
        this->num = num;
        this->color = color;
    }
};

圆环图各参数：

int m_radius;         //外圆半径
int m_innerWidth;     //圆环内径
QPoint m_center;      //圆心坐标
qreal m_startAngle;   //圆环绘制起点
int m_textDistance;   //文本与圆心的距离
qreal m_totality;     //总数
QVector<PieData> m_vData;   //数据容器

示例函数接口：
请添加图片描述

二、圆环图绘制步骤

1.使用drawRoundedRect实现饼状图圆角背景的绘制
2.获取各区域的占比*360得到此区域覆盖角度，使用drawPie完成各区域的绘制，绘制方向为逆时针
3.进行区域名称和数量文本的绘制，并使用drawLine将文本与对应区域的边界进行连接，所以这里要确定连接线的起点和终点位置
4.使用drawPoint来绘制连接线的终点，如果需要将终点设为空心圆，就需要使用drawEllipse组合实现
5.进行内圆的绘制，将饼图变为圆环图，详细的步骤见下列代码：

//重写绘图事件
void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);   //抗锯齿

    //绘制圆角背景
    painter.setBrush(Qt::white);
    painter.setPen(Qt::NoPen);   //去除背景边框
    painter.drawRoundedRect(10,10,360,360,8,8);

    //绘制饼图
    qreal startAngle = m_startAngle;   //绘制起点
    qreal spanAngle = 0;   //各区域占比,覆盖角度
    for(int i=0;i<m_vData.size();i++)
    {
        painter.setPen(m_vData[i].color);
        painter.setBrush(m_vData[i].color);
        if(m_totality)   //防止总数为0
        {
            spanAngle = m_vData[i].num * 360 / m_totality;
        }
        painter.drawPie(m_center.x() - m_radius,m_center.y() - m_radius,m_radius * 2,m_radius * 2,startAngle * 16,spanAngle * 16);
        startAngle += spanAngle;
    }

    //绘制区域名称和占比
    startAngle = m_startAngle;
    spanAngle = 0;
    for(int i=0;i<m_vData.size();i++)
    {
        painter.setPen(QColor("#333333"));
        painter.setFont(QFont("STSongti-SC-Bold, STSongti-SC",16));
        if(m_totality)
        {
            spanAngle = m_vData[i].num * 360 / m_totality;
        }
        int textAngle = startAngle + spanAngle / 2;
        QString text = QString("%1").arg(m_vData[i].name);
        int textWidth = painter.fontMetrics().horizontalAdvance(text);
        int textHeight = painter.fontMetrics().height();
        int textX = m_center.x() + m_textDistance * qCos(textAngle * M_PI / 180) - textWidth / 2;
        int textY = m_center.y() - m_textDistance * qSin(textAngle * M_PI / 180) + textHeight / 2;
        startAngle += spanAngle;

        //绘制文本
        QRect rect(textX,textY - textHeight,textWidth + 10,textHeight * 2);
        painter.drawText(rect,Qt::AlignCenter,text);

        //绘制连接线,文本要靠近对应区域,需要修改连接线终点位置
        painter.setPen(m_vData[i].color);
        int lineStartX = m_center.x() + (m_radius - 10) * qCos(textAngle * M_PI / 180);
        int lineStartY = m_center.y() - (m_radius - 10) * qSin(textAngle * M_PI / 180);
        int lineEndX = 0;
        int lineEndY = 0;
        if(textX < lineStartX)   //文本在左边
        {
            //可自行根据实际进行位置偏移的修改
            lineEndX = textX + textWidth/2;
            if(textY < lineStartY)   //文本在上边
            {
                lineEndY = textY + textHeight + 5;
            }
            else
            {
                lineEndY = textY - textHeight - 5;
            }
        }
        else
        {
            lineEndX = textX + textWidth/2;
            if(textY < lineStartY)
            {
                lineEndY = textY;
            }
            else
            {
                lineEndY = textY - textHeight - 5;
            }
        }
        painter.drawLine(lineStartX,lineStartY,lineEndX,lineEndY);

        //绘制终点
        painter.setPen(QPen(m_vData[i].color,5));
        painter.drawPoint(lineEndX,lineEndY);

        //将终点设为空心圆
        //painter.drawEllipse(QPoint(lineEndX,lineEndY),5,5);
        //painter.setPen(QPen(QColor("#FFFFFF"),1));
        //painter.setBrush(QColor("#FFFFFF"));
        //painter.drawEllipse(QPoint(lineEndX,lineEndY),3,3);
    }

    //绘制内圆,将饼图变为圆环
    painter.setPen(QPen(QColor("#FFFFFF"),10));
    painter.setBrush(QColor("#FFFFFF"));
    painter.drawEllipse(m_center,m_innerWidth,m_innerWidth);
}

三、设置圆环图数据

首先定义一个QVector容器来保存圆环图各区域数据的名称，颜色及数量，这里使用了findChild并结合输入框的控件名来找到对应QLineEdit，获取输入值存入容器，设置好饼图数据后使用update()进行绘图事件的更新

//更新饼图
void Widget::refreshChart()
{
    //设置圆环图各区域数据名称及颜色
    QVector<PieData> vData;
    QColor m_colors[5] = {QColor("#0286FF"),QColor("#FFA784"),QColor("#7EBBFF"),QColor("#DFEEFF"),QColor("#85D9FD")};
    QLineEdit *leNum;
    for(int i=0;i<5;i++)
    {
        leNum = ui->wg_test->findChild<QLineEdit *>("le_num_" + QString::number(i+1));   //找到对应lineedit
        if(leNum != 0)
        {
            int num = leNum->text().toInt();
            if(num > 0)   //过滤输入为空或0的数据
            {
                PieData data = PieData(QString("数据%1\n(%2)").arg(i+1).arg(num),num,m_colors[i]);
                vData.push_back(data);
            }
        }
    }
    this->setPieData(vData);
}

//设置饼图数据
void Widget::setPieData(QVector<PieData> vData)
{
    //获取数据
    m_vData = vData;

    //获取总数
    m_totality = 0;
    for(int i=0;i<m_vData.size();i++)
    {
        m_totality += m_vData[i].num;
    }
    this->update();
}

四、示例完整代码

1.widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QtMath>
#include <QPainter>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

struct PieData
{
    QString name;   //名称
    int num;        //数量
    QColor color;   //颜色

    PieData(QString name,int num,QColor color)
    {
        this->name = name;
        this->num = num;
        this->color = color;
    }
};

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

    void initWidget();

    //圆环图各参数函数接口
    void setRadius(int radius);
    void setInnerWidth(int width);
    void setCenter(QPoint center);
    void setStartAngle(qreal startAngle);
    void setTextDistance(int textDistance);
    void setPieData(QVector<PieData> vData);

    void refreshChart();

protected:
    void paintEvent(QPaintEvent *);

private slots:
    void on_pb_test_clicked();

private:
    Ui::Widget *ui;

    int m_radius;         //外圆半径
    int m_innerWidth;     //圆环内径
    QPoint m_center;      //圆心坐标
    qreal m_startAngle;   //圆环绘制起点
    int m_textDistance;   //文本与圆心的距离
    qreal m_totality;     //总数
    QVector<PieData> m_vData;   //数据容器
};
#endif // WIDGET_H

2.widget.cpp

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->initWidget();
}

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

//初始化界面
void Widget::initWidget()
{
    //初始化变量
    m_radius = 0;
    m_innerWidth = 0;
    m_center = QPoint(0,0);
    m_startAngle = 0;
    m_textDistance = 0;
    m_totality = 0;
    m_vData.clear();
}

//设置外圆半径
void Widget::setRadius(int radius)
{
    m_radius = radius;
}

//设置圆环内径
void Widget::setInnerWidth(int width)
{
    m_innerWidth = width;
}

//设置圆心
void Widget::setCenter(QPoint center)
{
    m_center = center;
}

//设置圆环绘制起点
void Widget::setStartAngle(qreal startAngle)
{
    m_startAngle = startAngle;
}

//设置文本与圆心的距离
void Widget::setTextDistance(int textDistance)
{
    m_textDistance = textDistance;
}

//设置饼图数据
void Widget::setPieData(QVector<PieData> vData)
{
    //获取数据
    m_vData = vData;

    //获取总数
    m_totality = 0;
    for(int i=0;i<m_vData.size();i++)
    {
        m_totality += m_vData[i].num;
    }
    this->update();
}

//更新饼图
void Widget::refreshChart()
{
    //设置圆环图各区域数据名称及颜色
    QVector<PieData> vData;
    QColor m_colors[5] = {QColor("#0286FF"),QColor("#FFA784"),QColor("#7EBBFF"),QColor("#DFEEFF"),QColor("#85D9FD")};
    QLineEdit *leNum;
    for(int i=0;i<5;i++)
    {
        leNum = ui->wg_test->findChild<QLineEdit *>("le_num_" + QString::number(i+1));   //找到对应lineedit
        if(leNum != 0)
        {
            int num = leNum->text().toInt();
            if(num > 0)   //过滤输入为空或0的数据
            {
                PieData data = PieData(QString("数据%1\n(%2)").arg(i+1).arg(num),num,m_colors[i]);
                vData.push_back(data);
            }
        }
    }
    this->setPieData(vData);
}

//重写绘图事件
void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);   //抗锯齿

    //绘制圆角背景
    painter.setBrush(Qt::white);
    painter.setPen(Qt::NoPen);   //去除背景边框
    painter.drawRoundedRect(10,10,360,360,8,8);

    //绘制饼图
    qreal startAngle = m_startAngle;   //绘制起点
    qreal spanAngle = 0;   //各区域占比,覆盖角度
    for(int i=0;i<m_vData.size();i++)
    {
        painter.setPen(m_vData[i].color);
        painter.setBrush(m_vData[i].color);
        if(m_totality)   //防止总数为0
        {
            spanAngle = m_vData[i].num * 360 / m_totality;
        }
        painter.drawPie(m_center.x() - m_radius,m_center.y() - m_radius,m_radius * 2,m_radius * 2,startAngle * 16,spanAngle * 16);
        startAngle += spanAngle;
    }

    //绘制区域名称和占比
    startAngle = m_startAngle;
    spanAngle = 0;
    for(int i=0;i<m_vData.size();i++)
    {
        painter.setPen(QColor("#333333"));
        painter.setFont(QFont("STSongti-SC-Bold, STSongti-SC",16));
        if(m_totality)
        {
            spanAngle = m_vData[i].num * 360 / m_totality;
        }
        int textAngle = startAngle + spanAngle / 2;
        QString text = QString("%1").arg(m_vData[i].name);
        int textWidth = painter.fontMetrics().horizontalAdvance(text);
        int textHeight = painter.fontMetrics().height();
        int textX = m_center.x() + m_textDistance * qCos(textAngle * M_PI / 180) - textWidth / 2;
        int textY = m_center.y() - m_textDistance * qSin(textAngle * M_PI / 180) + textHeight / 2;
        startAngle += spanAngle;

        //绘制文本
        QRect rect(textX,textY - textHeight,textWidth + 10,textHeight * 2);
        painter.drawText(rect,Qt::AlignCenter,text);

        //绘制连接线,文本要靠近对应区域,需要修改连接线终点位置
        painter.setPen(m_vData[i].color);
        int lineStartX = m_center.x() + (m_radius - 10) * qCos(textAngle * M_PI / 180);
        int lineStartY = m_center.y() - (m_radius - 10) * qSin(textAngle * M_PI / 180);
        int lineEndX = 0;
        int lineEndY = 0;
        if(textX < lineStartX)   //文本在左边
        {
            //可自行根据实际进行位置偏移的修改
            lineEndX = textX + textWidth/2;
            if(textY < lineStartY)   //文本在上边
            {
                lineEndY = textY + textHeight + 5;
            }
            else
            {
                lineEndY = textY - textHeight - 5;
            }
        }
        else
        {
            lineEndX = textX + textWidth/2;
            if(textY < lineStartY)
            {
                lineEndY = textY;
            }
            else
            {
                lineEndY = textY - textHeight - 5;
            }
        }
        painter.drawLine(lineStartX,lineStartY,lineEndX,lineEndY);

        //绘制终点
        painter.setPen(QPen(m_vData[i].color,5));
        painter.drawPoint(lineEndX,lineEndY);

        //将终点设为空心圆
        //painter.drawEllipse(QPoint(lineEndX,lineEndY),5,5);
        //painter.setPen(QPen(QColor("#FFFFFF"),1));
        //painter.setBrush(QColor("#FFFFFF"));
        //painter.drawEllipse(QPoint(lineEndX,lineEndY),3,3);
    }

    //绘制内圆,将饼图变为圆环
    painter.setPen(QPen(QColor("#FFFFFF"),10));
    painter.setBrush(QColor("#FFFFFF"));
    painter.drawEllipse(m_center,m_innerWidth,m_innerWidth);
}

//测试
void Widget::on_pb_test_clicked()
{
    //设置圆环各参数
    this->setRadius(100);
    this->setInnerWidth(70);   //设为0即为饼图
    this->setCenter(QPoint(180,180));
    this->setStartAngle(90);   //区域绘制方向为逆时针
    this->setTextDistance(150);
    this->refreshChart();
}

3.widget.ui
请添加图片描述

五、下载链接

我的示例百度网盘链接：https://pan.baidu.com/s/1q4S87YnMxhUd3w1l0Yr4tA
提取码：xxcj

总结

这个示例详细的讲述了使用QPinter进行圆环图的绘制，其中难点在于各区域文本与区域边界中间位置的连接，这里也是使用到了基础的数学三角函数来求取相关值，示例中的文本位置还是要根据实际进行偏移量的修改。另外可以看到其中的函数接口，这里你有没有想到什么呢？其实将其修改为自定义控件，当作一个组件来使用，后续使用只需要在ui界面上或者自己添加的widget对象提升为该控件，就可以很方便的实现圆环图的绘制，至于如何修改，这里就不进行介绍了，实现自定义控件的方式可以看看我之前写的文章：（一）Qt实现自定义控件的两种方式—提升法

hello：
共同学习，共同进步，如果还有相关问题，可在评论区留言进行讨论。

参考博客：QPainter绘制饼图

电气徐小江
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QT自定义控件-饼状图（含源码和demo）
08-24
继承QWIDGET实现的自定义饼图，效果跟echarts中的差不多
Qt绘制圆环（渐变圆环）
weixin_43246170的博客
06-08 1848
通过Qt的QPainterPath来实现，通过三角函数计算x，y坐标点围成一个环形区域。
Qt绘制圆环
最新发布
05-09 245
DrawCircle.h头文件。
QtCharts 饼图的基本用法
u011186532的专栏
10-12 4359
Qt饼图由定义为QPieSlice对象的扇形切片组成。本文主要是介绍如何使用饼图展现统计数据。
QT（QPainter画圆弧）
m0_49476241的博客
05-31 7663
本篇文章给大家介绍一下如何使用QPainter来画圆弧。QPainter画圆弧进行画圆弧时要注意的就是起始角度和旋转的角度。希望大家多多支持，后续将带来更多QPainter的用法。
Qt之QPainter绘制多个矩形/圆形（含源码+注释）
lw的博客
03-13 5108
文章较简单，练手即可，下章为QPainter实现画笔功能。友情提示——哪里看不懂可私哦，让我们一起互相进步吧o/)注：文章为作者编程过程中所遇到的问题和总结，内容仅供参考，若有错误欢迎指出。注：如有侵权，请联系作者删除。
【QT开发笔记-基础篇】| 第五章 绘图QPainter | 5.9 圆、椭圆
B站-大轮明王讲Qt
12-23 1481
（1）API 介绍 （2）具体代码实现
QT自定义控件-饼状图（环形饼状图）（含代码和demo）
08-25
本教程将详细讲解如何在QT中实现一个自定义的饼状图（环形饼状图）控件，包括代码解析和实际运行的demo。 首先，我们需要了解QT中的QWidget类，它是所有用户界面组件的基础类，提供了基本的绘制、事件处理等功能。...
qt绘制圆形和折线图的方法
01-12
本示例"qt绘制圆形和折线图的方法"展示了如何利用QPainter在QLabel控件上动态绘制圆形和折线图，并实现定时刷新界面的功能，这对于创建自定义用户界面或者进行数据可视化是非常有用的。 首先，我们需要包含必要的...
Qt 绘制 Smith chart 源码
01-19
在给定的Qt项目中，我们看到使用Qt5.11.3版本，结合QPainter类实现了一个小程序，能够读取txt文件并绘制史密斯圆图。以下是对这个项目的详细解析。 首先，Qt是一个跨平台的C++图形用户界面应用程序开发框架，广泛...
Qt+圆环+扫描动作.zip
10-22
在本项目中，"Qt+圆环+扫描动作.zip" 提供了一个使用Qt框架实现的环形扫描动画的示例。这个项目基于Qt 5.11.2版本，并使用了MinGW编译器。主要涉及的技术点包括QPainter、QTimer以及QConicalGradient和...
Qt绘制雷达表盘
02-27
我们可以在固定角度间隔上画出一系列半径递增的圆环，使用QPainter的drawEllipse()或drawArc()方法。 6. **十字架** - 十字架作为雷达的瞄准标记，通常由垂直和水平的线组成。我们可以使用QPainter的drawLine()...
Qt QPainter的使用及矩形、圆形等常见图形的画法
m0_73443478的博客
12-09 3794
Qt QPainter的使用及矩形、圆形等常见图形的画法
Qt画环状图的几种简单方法
zq9955的博客
12-02 4975
1、红色圆环 代码部分 void MainWindow::paintEvent(QPaintEvent* event) { QPainter painter(this); painter.save(); //设置反锯齿 painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform | QPainter::Qt4CompatiblePainting); QRect draw
QT图表chart-饼状图
博咯的博客
11-16 6308
QT图表-饼状图前言一、使用步骤首先在项目文件中加入：其次在头文件添加：widget控件二、程序总结 前言 图表功能是QT做数据可视化屏幕的基础，这里我用的是QT再带的chart类来实现图表。 饼状图实现效果如下： 详细见官网https://doc.qt.io/qt-5.15/qtcharts-index.html 一、使用步骤 首先在项目文件中加入： QT += charts 其次在头文件添加： #include <QtCharts> using namespace QtCha
Qt绘图：渐变
友善啊，朋友的博客
12-20 2693
1、线性渐变 线性渐变需要指定开始点和结束点，然后将开始点和结束点之间的区域进行等分，开始点的位置为0.0，结束点的位置为1.0，而它们之间的位置按照距离比例进行设定，然后使用在指定的位置插入指定的颜色。 QLinearGradient linearGradient(rect.topLeft(),rect.bottomRight()); linearGradient.setColorAt(0.0,Qt::red); linearGradient.setColorAt(1.0,Q
Qt图表绘制（QtCharts）-绘制简单的饼图（8）
mahuifa的博客
05-02 2598
Qt使用QtCharts模块绘制饼图的Demo，与实现圆环图差不多，实现步骤、代码注释详细，便于初学者学习。
Qt:绘制圆形图片头像
Healer_CC的博客
04-11 763
Qt绘制圆形图片 、圆形头像
Qt数据可视化(QPieSeries饼状图)
啊渊的专栏
05-18 2151
饼状图常用于统计学模型。有2D与3D饼状图，2D饼状图为圆形，手画时，常用圆规作图。饼状图显示一个数据系列（数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼状图只有一个数据系列。）中各项的大小与各项总和的比例。饼状图中的数据点（数据点：在图表中绘制的单个值，这些值由条形、柱形、折线、饼状图或圆环图的扇面、圆点和其他被称为数据标记的图形表示。相同颜色的数据标记组成一个数据系列。）...
qt qpainter绘制地图
08-25
Qt是一款跨平台的C++图形用户界面开发框架，而QPainter则是Qt中用于绘制2D图形的重要类之一。我们可以利用QPainter来绘制地图。 首先，我们需要准备一张地图图像文件，可以是常见的格式，如PNG、JPG等。然后，利用Qt的图形视图框架，我们可以创建一个自定义的QWidget子类，重写其paintEvent()函数来进行地图绘制。 在paintEvent()函数中，我们可以通过QPainter对象来操作，它提供了一系列的绘图函数来绘制各种图形元素。例如，通过drawPixmap()函数来绘制地图图像，可以设置位置、大小等参数；通过drawText()函数来绘制地名、标签等文字信息；通过drawLine()函数来绘制道路等线条。 除了绘制地图本身，我们还可以根据需要添加交互功能，例如点击某个地点后显示详细信息、双击地图放大缩小等。这可以通过重写鼠标事件函数来实现，例如mousePressEvent()、mouseDoubleClickEvent()等。 绘制地图时，我们还可以根据需求进行一些优化，例如在缩放或移动地图时只绘制可见区域，避免无效的绘制；在地图上标注特定的地点、路径等。 总之，Qt的QPainter提供了一套强大的绘图工具，可以用于绘制地图。通过合理利用QPainter的各种函数和属性，我们可以实现地图绘制、交互和优化等功能，为用户提供更好的地图浏览体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值