QT使用QPainter绘制多边形维度图

已于 2024-07-17 09:12:24 修改
阅读量524 收藏 5
点赞数 25
分类专栏： QT自定义控件分享 文章标签： qt 开发语言 c++ 程序人生 人机交互
于 2024-07-17 08:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012959478/article/details/140463892
版权

        多边形统计维度图是一种用于展示多个维度的数据的图表。它通过将各个维度表示为图表中的多边形的边，根据数据的大小和比例来确定各个维度的长度。

一、简述

         本示例实现六边形战力统计维度图，一种将六个维度的战力统计以六边形图形展示的方法。六个维度是：攻击力、防御力、速度、智力、生命值、特殊能力。六边形战力统计维度图将这些维度以六个边长不等的六边形表示，每个边长代表对应维度的数值大小。通过连接这些边，可以得到一个多边形，多边形的形状和大小表示单位的整体战斗能力。一般来说，这个多边形越接近完整的六边形，说明单位在各项能力上都相对均衡和强大。

二、 设计思路        

        要实现多边形统计维度图，基类选择QWidget，使用QPainter根据图形需求画出图形。

设计思路：

  1. 将统计维度分别表示为顶点，分别标注在顶点上。这些统计维度可以根据具体需求进行选择，例如攻击力、防御力、速度等。

  2. 在多边形图的上，可以设置不同的刻度值，表示不同的水平。根据统计数据的大小，可以将数据点标注在相应的位置上。

  3. 使用不同的颜色或图案来表示不同的统计数据点，以便更好地区分不同的数据。

  4. 在多边形图的周围添加标签，用来说明各个统计维度的含义，以便用户更好地理解图表。

三、效果 

四、核心代码  
1、头文件
#ifndef DIMENSIONCHARTWIDGET_H
#define DIMENSIONCHARTWIDGET_H

#include <QMap>
#include <QPen>
#include <QObject>
#include <QWidget>

class DimensionInfo;
class DimensionChartWidget : public QWidget
{
    Q_OBJECT

public:
    explicit DimensionChartWidget(QWidget *parent = nullptr);

    inline QColor backgroundColor() const { return m_backgroundColor; }
    inline void setBackgroundColor(const QColor &backgroundColor) { m_backgroundColor = backgroundColor; }

    inline float radius() const { return m_radius; }// 设置维度半径
    inline void setRadius(float radius) { m_radius = radius; }

    inline int sidesNumber() const { return m_sidesNumber; } // 设置维度网格数量
    inline void setSidesNumber(int sidesNumber) {m_sidesNumber = sidesNumber; }

    inline QPen sidesPen() const { return m_sidesPen; }// 设置维度网格画笔
    inline void setSidesPen(const QPen &sidesPen) { m_sidesPen = sidesPen; }

    inline QVector<DimensionInfo> dimensionInfos() const { return m_dimensionInfos; }
    inline void setDimensionInfos(const QVector<DimensionInfo> &dimensionInfos) { m_dimensionInfos = dimensionInfos; }

    inline QPen textPen() const { return m_textPen; }//设置字体画笔
    inline void setTextPen(const QPen &textPen) { m_textPen = textPen; }

    inline QPen dimensionPen() const { return m_dimensionPen; }// 设置维度画笔
    inline void setDimensionPen(const QPen &dimensionPen) { m_dimensionPen = dimensionPen; }

    inline QFont textFont() const { return m_textFont; }//设置字体
    inline void setTextFont(const QFont &textFont) { m_textFont = textFont; }

    inline int filletRadius() const { return m_filletRadius; }
    inline void setFilletRadius(int filletRadius) { m_filletRadius = filletRadius; }

protected:
    void paintEvent(QPaintEvent*);
    void drawText(QPainter&, QPointF, QString text);
    void convertPoint(QPointF&);

private:
    void init();

private:
    QPen m_textPen;
    QPen m_sidesPen;
    QPen m_dimensionPen;
    QFont m_textFont;
    QColor m_backgroundColor;

    int m_filletRadius;
    float m_radius;
    int m_sidesNumber;
    QVector<DimensionInfo> m_dimensionInfos;
};


class DimensionInfo {
public:
    DimensionInfo() = default;
    DimensionInfo(QString text, float percentage) { m_text = text; m_percentage = percentage; }

    inline QString text() const { return m_text; }
    inline void setText(const QString &text) { m_text = text; }

    inline float percentage() const { return m_percentage; }
    inline void setPercentage(float percentage) { m_percentage = percentage; }

private:
    QString m_text;
    float m_percentage;
};
#endif // DIMENSIONCHARTWIDGET_H
2、实现代码
#include "DimensionChartWidget.h"
#include <QPainter>
#include <QtMath>
#include <QPainterPath>

DimensionChartWidget::DimensionChartWidget(QWidget *parent) : QWidget(parent)
{
    m_radius = 0;
    m_sidesNumber = 1;

    init();
}

void DimensionChartWidget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    painter.setPen(QColor(m_backgroundColor));
    painter.setBrush(QBrush(m_backgroundColor));
    painter.drawRoundedRect(rect(), m_filletRadius, m_filletRadius);

    // 绘图设备的坐标原点（0,0)在左上角，水平向右增长，垂直向下增长。
    // 将坐标系原点移动到界面中间
    painter.translate(width() / 2.0, height() / 2.0);

    // 设中心点到边的垂线与半径的夹角为degree=（360/count)/2
    float degree = 360.0 / m_dimensionInfos.size();

    // 开始绘制多边形，并为每个区域上色
    painter.setPen(m_sidesPen);
    QPointF lastPoint(0, -m_radius);
    QVector<QPointF> points;
    for(int i = 0; i < m_dimensionInfos.size(); i++)
    {
        float radian = qDegreesToRadians(degree * (i + 1));
        float x = m_radius * qSin(radian);
        float y = m_radius * qCos(radian);

        // 绘制该三角区块
        QPainterPath path;
        QPointF point(x, -y);
        path.lineTo(point);
        path.lineTo(lastPoint);
        path.lineTo(0, 0);
        painter.drawPath(path);

        //  绘制内线
        for(int j = m_sidesNumber - 1; j > 0; j--)
        {
            float multiple = (float)j / m_sidesNumber;
            painter.drawLine(point * multiple, lastPoint * multiple);
        }

        // 绘制文本
        painter.save();
        painter.setPen(m_textPen);
        painter.setFont(m_textFont);
        drawText(painter, point, m_dimensionInfos.at(i).text());
        painter.restore();

        lastPoint = point;
        points << point * m_dimensionInfos.at(i).percentage();
    }

    // 绘制维度信息
    painter.setPen(m_dimensionPen);
    QColor color = m_dimensionPen.color();
    color.setAlpha(150);
    painter.setBrush(QBrush(color));
    QPolygonF polygon(points);
    QPainterPath painterPath;
    painterPath.addPolygon(polygon);
    painter.drawPolygon(polygon);
}

//绘制文本
void DimensionChartWidget::drawText(QPainter& painter, QPointF point, QString text)
{
    convertPoint(point);
    QRectF textRect;
    textRect.setSize(QSize(50, 30));
    int flag = Qt::AlignCenter;
    if(point.x() > 0)
    {
        if(point.y() < 0)
        {
            //x > 0 y < 0
            textRect.setBottomLeft(point);
            textRect.setTopRight(QPoint(point.x() + 50, point.y() - 30));
            flag = Qt::AlignBottom | Qt::AlignLeft;
        }
        else if(point.y() > 0)
        {
            //x>0 y>0
            textRect.setTopLeft(point);
            textRect.setBottomRight(QPoint(point.x() + 50, point.y() + 30));
            flag = Qt::AlignTop | Qt::AlignLeft;
        }
        else
        {
            //x>0 y=0
            point.setY(point.y() - 15);
            textRect.setTopLeft(point);
            textRect.setBottomRight(QPoint(point.x() + 50, point.y() + 30));
            flag = Qt::AlignVCenter | Qt::AlignLeft;
        }
    }
    else if(point.x() < 0)
    {
        if(point.y() < 0)
        {
            //x<0 y<0
            textRect.setBottomRight(point);
            textRect.setTopLeft(QPoint(point.x() - 50, point.y() - 30));
            flag = Qt::AlignBottom | Qt::AlignRight;
        }
        else if(point.y() > 0)
        {
            //x<0 y>0
            textRect.setTopRight(point);
            textRect.setBottomLeft(QPoint(point.x() - 50, point.y() + 30));
            flag = Qt::AlignTop | Qt::AlignRight;
        }
        else
        {
            //x<0 y=0
            point.setY(point.y() - 15);
            textRect.setTopRight(point);
            textRect.setBottomLeft(QPoint(point.x() - 50, point.y() + 30));
            flag = Qt::AlignVCenter | Qt::AlignRight;
        }
    }
    else
    {
        if(point.y() < 0)
        {
            //x=0 y<0
            point.setX(point.x() - 25);
            textRect.setBottomRight(point);
            textRect.setTopLeft(QPoint(point.x() + 50, point.y() - 30));
            flag = Qt::AlignHCenter | Qt::AlignBottom;
        }
        else if(point.y() > 0)
        {
            //x=0 y>0
            point.setX(point.x() - 25);
            textRect.setTopLeft(point);
            textRect.setBottomRight(QPoint(point.x() + 50, point.y() + 30));
            flag = Qt::AlignHCenter | Qt::AlignTop;
        }
    }
    painter.drawText(textRect, flag, text);
}

void DimensionChartWidget::convertPoint(QPointF& point)
{
    if(qAbs(point.x()) < 0.001)
    {
        point.setX(0);
    }
    else if(qAbs(point.y()) < 0.001)
    {
        point.setY(0);
    }
}

void DimensionChartWidget::init()
{
    setBackgroundColor(QColor(255,255,255));

    // 设置维度网格数量
    setSidesNumber(5);

    // 设置维度半径
    setRadius(120);

    // 设置维度网格画笔
    QPen sidesPen;
    sidesPen.setColor(QColor("#0095C5"));
    sidesPen.setWidth(2);
    setSidesPen(sidesPen);

    // 设置维度画笔
    QPen dimensionPen;
    dimensionPen.setColor(Qt::GlobalColor::red);
    dimensionPen.setWidth(3);
    setDimensionPen(dimensionPen);

    // 设置字体信息
    QPen textPen;
    setTextPen(textPen);
    QFont textFont;
    textFont.setFamily("微软雅黑");
    textFont.setPointSize(10);
    setTextFont(textFont);
}

        以上是多边形统计维度图实现代码，在实际使用中，可以根据需要进行扩展，添加一些其他的功能。例如：

  1. 支持多边形的操作。使其支持多边形的旋转、平移、缩放等操作，以方便更灵活地对多边形进行分析和展示。

  2. 导入和导出多边形数据。我们可以添加文件读写功能，允许用户从外部文件导入多边形数据，并将统计维度的结果保存到文件中。

        这些功能的添加可以进一步提升多边形统计维度图的实用性和灵活性。根据具体的需求，你可以根据需要修改绘制参数和数据来自定义图形，可以选择扩展代码的功能，以适应不同的应用场景。      

五、使用示例

以下是一个简单的示例代码，演示了如何在Qt中使用此控件：

#include "mainwindow.h"
#include "DimensionChartWidget.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setWindowTitle("维度图");
    resize(400, 400);

    DimensionChartWidget* pDimensionChartWidget = new DimensionChartWidget(this);
    pDimensionChartWidget->resize(this->width() - 60, this->height() -60);
    pDimensionChartWidget->move(30, 30);

    QVector<DimensionInfo> dimensionInfos;
    DimensionInfo dimensionInfo("攻击力", 0.55);
    dimensionInfos.append(dimensionInfo);
    dimensionInfo.setText("防御力");
    dimensionInfo.setPercentage(0.85);
    dimensionInfos.append(dimensionInfo);
    dimensionInfo.setText("速度");
    dimensionInfo.setPercentage(0.95);
    dimensionInfos.append(dimensionInfo);
    dimensionInfo.setText("智力");
    dimensionInfo.setPercentage(0.45);
    dimensionInfos.append(dimensionInfo);
    dimensionInfo.setText("生命值");
    dimensionInfo.setPercentage(0.65);
    dimensionInfos.append(dimensionInfo);
    dimensionInfo.setText("特殊能力");
    dimensionInfo.setPercentage(0.65);
    dimensionInfos.append(dimensionInfo);
    pDimensionChartWidget->setDimensionInfos(dimensionInfos);
}

MainWindow::~MainWindow()
{

}

        以上示例是一个六边形战力统计维度图，可以用于综合评估某个实体在不同维度上的战力表现。通过提供各个维度的评分和连接评分最高点的边界来展示实体在不同维度上的能力表现。这样的图表可以帮助决策者更全面地了解和比较实体的战力，从而做出更准确的决策。

        谢谢您的关注和阅读！如有任何问题或需要帮助，请随时与我联系。希望您能继续支持并享受更多精彩的内容。祝您生活愉快！

六、源代码下载
秀木易风
关注
  • 25
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
pyqt5教程11：绘制外观
gongdiwudu的专栏
02-25 3142
PyQt5 绘画系统能够渲染矢量图形、图像和基于轮廓字体的文本。当我们想要更改或增强现有小部件时，或者如果我们从头开始创建自定义小部件时，应用程序中需要绘画。为了进行绘图，我们使用 PyQt5 工具包提供的绘图 API。
分享Qt 之 Graphics View Framework 简介内容
haozige888的博客
08-01 506
Graphics View Framework 交互式 2D 图形的 Graphics View 框架概述。自 Qt4.2 中引入了 Graphics View，以取代其前身 QCanvas。Graphics View 提供了一个用于管理和交互大量的可定制的 2D 图形项与用于可视化这些项的 View 小部件的 surface（曲面），并提供缩放（zooming）和旋转（rotation）功能支持。 该框架包括事件传播体系结构（an event propagation architecture），该体系结构
Qt 绘制二维图形
aoxuestudy的专栏
02-03 1722
Qt 绘制二维图形 前言 Qt 中提供了强大的 2D 绘图系统，可以使用相同的 API 在屏幕和绘图设备上进行绘制，它主要基于QPainter、QPaintDevice 和 QPaintEngine 这三个类。 QPainter 用于执行绘图操作，其提供的 API 在 GUI 或 QImage、QOpenGLPaintDevice、QWidget 和QPaintDevice 显示图形（线、形状、渐变等）、文本和图像。 QPaintD...
Qt自定义控件-维度图/雷达图
weixin_42105886的博客
08-19 1311
基于Qt Painter开发的维度图/雷达图
QT之“蛛网图”自绘控件
octdream的专栏
10-08 3234
在很多软件中我们会看到用雷达图的“蛛网图”来表示各类属性评分值，虽然我可以通过调用ECharts来实现这种效果，但是没有发现用QT来实现的控件，所以自己在闲下来的时候写了一个简单的图表，实现效果图如下： 核心代码如下： 1.绘制正多边形 void RadarChart::drawPolygon(QPainter *painter) { painter->save()...
Qt之QChart使用
我智商开挂的博客
12-25 6242
1、QChartView视图组件(画布)，无法单独进行显示，需要依附其他组件进行显示，如在窗口设计界面先放置一个QGraphicsView组件，然后升级为QChartView；随后QChartView通过setChart将QChart添加为显示的图表。 2、QChart代表一个图表对象，可以包含一个或多个QAbstractSeries（系列）对象。它提供了管理和控制图表的方法，如添加/移除系列、设置图表标题、轴标签等。3、QAbstractSeries是所有系列类的基类，代表图表中的一个系列。派生类包括QL
快速学会绘制Pyqt5中的所有图（下）
weixin_49520696的博客
12-09 1471
在 PyQtGraph 中直接绘制平行坐标图（Parallel Coordinates）并不直接支持，因为 PyQtGraph 主要用于绘制二维和三维的数据可视化图形，如折线图、散点图等。在 PyQtGraph 中创建甘特图需要一些额外的工作，因为它主要用于绘制二维和三维的数据可视化图形，如折线图、散点图等，而不直接支持甘特图。在 PyQtGraph 中绘制股票图（通常指蜡烛图或OHLC图）需要一些额外的步骤，因为这需要特殊的图表来表示股票的开盘价、最高价、最低价和收盘价。类来表示甘特图中的单个任务。
QtCharts详细介绍及其使用
zw_ggr_2017的博客
09-13 4973
QtCharts是Qt框架中的一个模块，用于创建各种图表和数据可视化。它提供了一组功能强大且易于使用的类，使开发人员能够轻松地在应用程序中添加各种交互式图表。
PyQt5 快速入门
zhouzhiwengang的专栏
04-16 991
PyQt是一个GUI小部件工具包。它是Qt的Python接口，Qt是最强大，最受欢迎的跨平台GUI库之一。PyQt由RiverBank Computing Ltd.开发。最新版本的PyQt可从其官方网站下载 -PyQt API是一组包含大量类和函数的模块。虽然QtCore模块包含用于处理文件和目录等的非GUI功能，但QtGui模块包含所有图形控件。此外，还有用于处理XML(QtXml)，SVG(QtSvg)和SQL(QtSql)等的模块。在PyQt5中，可以通过继承现有的窗口类（如QMainWindow。
Qt使用QPainter绘制3D立方体
08-24
本教程将详细介绍如何使用QPainter在Qt中绘制3D立方体。 首先，我们需要准备立方体的顶点数据。一个3D立方体由8个顶点组成，每个顶点都有三个坐标(x, y, z)。在示例代码中，这8个顶点按顺时针顺序存储在一个QVector...
Qt 使用QPainter类在子控件上画图
05-10
在Qt框架中，QPainter是用于图形绘制的核心类，它提供了丰富的绘图功能，包括线条、曲线、文本、图像等。然而，在实际开发过程中，有时我们可能会遇到在子控件上使用QPainter画图时出现问题，尤其是在有事件过滤器...
Qt QPainter绘制柱状图表
11-13
以上就是使用Qt QPainter绘制简单柱状图表的基本步骤。实际应用中，你可能还需要添加更多功能，比如设置图表标题、轴标签、值标签、颜色渐变等。这可以通过扩展`BarChartWidget`类，增加更多的成员变量和方法来实现...
QT用Qpainter绘制实时曲线图
07-06
综上所述，QT用Qpainter绘制实时曲线图涉及到的主要知识点有：QPainter的使用、数据生成、实时更新机制、性能优化以及曲线平滑处理。通过掌握这些，你可以创建出能够实时展示动态数据变化的可视化工具，这对于数据...
qt 创建一个矩形，矩形的边线可以拖拽
xie__jin__cheng的博客
07-15 161
qt 创建一个矩形，矩形的边线可以拖拽
Qt判定鼠标是否在该多边形的线条上
weixin_68011805的博客
07-16 474
遍历多边形的每条线段，使用点到线段距离的公式计算鼠标位置到每条线段的距离。：如果距离小于某个阈值（例如像素单位的5或10），则可以认为鼠标位于线条上。函数检查鼠标位置是否在指定的阈值内。如果是，则可以认为鼠标位于线条上。是多边形顶点的数组。在实际使用中，你需要将这些变量替换为你的具体值。）是一个敏感度参数，你可以根据实际需要调整这个值。函数计算了给定点到线段的最近点的距离。函数遍历多边形的所有线段，并使用。是鼠标事件提供的当前鼠标位置，方法获取鼠标的当前位置。：在鼠标事件中，使用。
qt tabWidget 详解
xie__jin__cheng的博客
07-14 669
qt tabWidget 详解
Qt篇——在线程中更新ui控件
u011391361的博客
07-16 72
在线程中更新ui控件
【Qt】信号与槽
最新发布
t5y22的博客
07-16 626
信号与槽（Signal & Slot）是 Qt 编程的基础，也是 Qt 的一大创新。因为有了信号与槽的编程机制，在 Qt 中处理界面各个组件的交互操作时变得更加直观和简单。信号（Signal）就是在特定情况下被发射的事件，例如PushButton 最常见的信号就是鼠标单击时发射的 clicked() 信号。发射信号使用Qt的emit关键字。定义信号使用QT的signals关键字。槽（Slot）就是对信号响应的函数。
Qt中QPainter绘制QToolButton的图片和文字
02-06
在 Qt 中，可以使用 QPainter 类来绘制 QToolButton 的图片和文字。 首先，需要创建一个 QToolButton 对象并设置好要显示的图片和文字。然后，使用 QPainter 类的构造函数创建一个 QPainter 对象，并将 QToolButton 作为参数传入。接下来，可以使用 QPainter 类的 drawText() 和 drawImage() 函数分别绘制文字和图片。最后，调用 QPainter 类的 end() 函数结束绘制操作。 下面是一个简单的例子，展示了如何使用 QPainter 绘制 QToolButton 的图片和文字： ``` QToolButton* button = new QToolButton; button->setText("按钮"); button->setIcon(QIcon("button.png")); QPainter painter(button); painter.drawText(button->rect(), Qt::AlignCenter, button->text()); painter.drawImage(button->rect(), QImage("button.png")); painter.end(); ``` 希望这能帮到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值