【QT开发笔记-基础篇】| 第五章 绘图QPainter | 5.10 圆弧、饼图

本节对应的视频讲解：B_站_视_频

https://www.bilibili.com/video/BV1AA411R75N

本节讲解如何绘制圆弧、饼图、弦图

1. 相关的 API

直接查看官方的帮助文档，可以看到有多个重载的方法

1.1 圆弧

绘制圆弧时，需要指定一个矩形，以及开始角度 startAngel、跨度角度 spanAngle

角度的起始零点为时钟三点钟位置，逆时针增加。一圈的跨度为360x16，半圈为180x16

// 直接指定一个矩形对象
void drawArc(const QRectF &rectangle, int startAngle, int spanAngle);
void drawArc(const QRect &rectangle, int startAngle, int spanAngle);

// 通过指定左上角的顶点和宽高来指定一个矩形
void drawArc(int x, int y, int width, int height, int startAngle, int spanAngle);

1.2 饼图

绘制饼图时，和绘制圆弧类似，也需要指定一个矩形，以及开始角度 startAngel、跨度角度 spanAngle

// 直接指定一个矩形对象
void drawPie(const QRectF &rectangle, int startAngle, int spanAngle);
void drawPie(const QRect &rectangle, int startAngle, int spanAngle);

// 通过指定左上角的顶点和宽高来指定一个矩形
void drawPie(int x, int y, int width, int height, int startAngle, int spanAngle);

1.3 弦图

绘制饼图时，和绘制圆弧类似，也需要指定一个矩形，以及开始角度 startAngel、跨度角度 spanAngle

// 直接指定一个矩形对象
void drawChord(const QRectF &rectangle, int startAngle, int spanAngle);
void drawChord(const QRect &rectangle, int startAngle, int spanAngle);

// 通过指定左上角的顶点和宽高来指定一个矩形
void drawChord(int x, int y, int width, int height, int startAngle, int spanAngle);

2. 具体实现

仍然使用绘制矩形时的 QRect 对象

只需在 PaintWidget.cpp 的 paintEvent 中添加如下代码即可：

void PaintWidget::paintEvent(QPaintEvent *event)
{
    ...

    QRect rect2(10, 10, 80, 80);
    int startAngle = 30 * 16;
    int arcLength = 120 * 16;
    
    for ( int x = 0; x < width(); x += 100 ) {
        for ( int y = 0; y < height(); y += 100 ) {
            
            ...
                
            switch ( mShape ) {
                // 圆弧、饼图、弦图
                case _Arc:
                    //                    painter.drawRect(rect);
                    painter.drawArc(rect, startAngle, arcLength);
                    break;
                case _Pie:
                    painter.drawPie(rect, startAngle, arcLength);
                    break;
                case _Chord:
                    painter.drawChord(rect, startAngle, arcLength);
                    break;
            }
            ...  
        }
    }
}

最终绘制的效果，如下：