Qt 绘图详解 - 技术栈

文章目录

头文件和构造函数

cpp 复制代码

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QPainter>

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

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

启用反锯齿功能

首先，我们在每个图形的绘制过程中启用反锯齿功能，以保证绘制效果的平滑。

cpp 复制代码

void MainWindow::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);
    // 以下为具体图形的绘制代码
}

绘制矩形

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);

    // 画笔样式
    pen.setCapStyle(Qt::FlatCap); // 线端点样式
    pen.setJoinStyle(Qt::BevelJoin); // 线连接点样式

    // 给画家设置画笔
    painter.setPen(pen);

    // 设置画刷
    QBrush brush;
    brush.setColor(Qt::yellow);
    brush.setStyle(Qt::SolidPattern);

    // 给画家设置画刷
    painter.setBrush(brush);

    // 绘制矩形
    QRect rect(60, 60, 400, 400);
    painter.drawRect(rect);
}

解释:

QPen 用于设置画笔的宽度、颜色、线端点样式和连接点样式。
QBrush 用于设置填充颜色和样式。
QRect 定义了矩形的尺寸和位置。
painter.drawRect(rect) 使用指定的画笔和画刷绘制矩形。

绘制圆角矩形

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 设置画刷
    QBrush brush;
    brush.setColor(Qt::yellow);
    brush.setStyle(Qt::SolidPattern);
    painter.setBrush(brush);

    // 绘制圆角矩形
    QRect roundedRect(20, 20, 400, 300);
    painter.drawRoundedRect(roundedRect, 20, 20);
}

解释:

painter.drawRoundedRect 绘制带圆角的矩形。
20, 20 指定了圆角的水平和垂直半径。

绘制椭圆

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 设置画刷
    QBrush brush;
    brush.setColor(Qt::yellow);
    brush.setStyle(Qt::SolidPattern);
    painter.setBrush(brush);

    // 绘制椭圆
    QRect ellipseRect(20, 20, 400, 300);
    painter.drawEllipse(ellipseRect);
}

解释:

painter.drawEllipse 使用指定的矩形边界绘制椭圆。

绘制圆弧

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 绘制圆弧
    QRect arcRect(20, 20, 400, 400);
    // 起始角和伸缩角必须以1/16度指定，即一个完整的圆等于5760(16 * 360)。
    // 角度的正值表示逆时针方向，负值表示顺时针方向
    // 零度在3点钟方向（参考手表的位置）
    painter.drawArc(arcRect, 0 * 16, 90 * 16);
}

解释:

painter.drawArc 绘制圆弧。
0 * 16 和 90 * 16 分别表示起始角度和跨越角度，单位为1/16度。

绘制弦

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 绘制弦
    QRect chordRect(20, 20, 400, 400);
    painter.drawChord(chordRect, 0 * 16, 120 * 16);
}

解释:

painter.drawChord 绘制弦，弦是一个连接圆弧两个端点的线段。

绘制凸多边形

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 绘制凸多边形
    QPoint convexPoints[4] = {
        {50, 100},
        {100, 50},
        {500, 160},
        {110, 400}
    };
    painter.drawConvexPolygon(convexPoints, 4);
}

解释:

painter.drawConvexPolygon 绘制凸多边形。
QPoint 数组定义了多边形的顶点。

绘制图片

cpp 复制代码

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

    // 绘制图片
    QRect imageRect(10, 10, 400, 300);
    QImage image(":/JINGMAO.jpg");
    painter.drawImage(imageRect, image);
}

解释:

painter.drawImage 在指定的矩形区域内绘制图片。

绘制直线

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 绘制直线
    QLine line(50, 50, 400, 400);
    painter.drawLine(line);
}

解释:

QLine 定义了直线的起点和终点。
painter.drawLine 绘制直线。

绘制多条直线

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 绘制多条直线
    QRect rect(50, 50, 400, 300);
    QVector<QLine> lines;
    lines.append(QLine(rect.topLeft(), rect.topRight()));
    lines.append(QLine(rect.bottomLeft(), rect.topRight()));
    lines.append(QLine(rect.topLeft(), rect.bottomRight()));
    painter.drawLines(lines);
}

解释:

QVector<QLine> 用于存储多条直线。
painter.drawLines 绘制多条直线。

绘制多点连接的线

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 绘制多点连接的线
    QPoint points[5] = {
        {50, 100},
        {100, 50},
        {500, 160},
        {200, 200},
        {110, 400}
    };
    painter.drawPolyline(points, 5);
}

解释:

QPoint 数组定义了

多点连接的线的顶点。

painter.drawPolyline 绘制多点连接的线。

绘制路径

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 绘制路径
    QRect rect(50, 50, 400, 300);
    QPainterPath path;
    path.addEllipse(rect);
    path.addRect(rect);
    painter.drawPath(path);
}

解释:

QPainterPath 用于定义复杂的路径。
painter.drawPath 绘制由 QPainterPath 对象定义的路径。

绘制扇形

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 绘制扇形
    QRect rect(50, 50, 400, 300);
    painter.drawPie(rect, 0 * 16, 120 * 16); // 0 度是 3 点钟方向
}

解释:

painter.drawPie 绘制扇形。

绘制点

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 绘制单个点
    painter.drawPoint(QPoint(100, 200));

    // 绘制多个点
    QPoint points[4] = {
        {50, 100},
        {100, 50},
        {500, 160},
        {110, 400}
    };
    painter.drawPoints(points, 4);
}

解释:

painter.drawPoint 绘制单个点。
painter.drawPoints 绘制多个点。

绘制文本

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 设置字体
    QFont font;
    font.setFamily("微软雅黑");
    font.setPointSize(30);
    font.setBold(true);
    painter.setFont(font);

    // 绘制文本
    QRect rect(100, 100, 400, 200);
    painter.drawText(rect, "刘琴小宝贝");
}

解释:

QFont 设置字体属性。
painter.drawText 在指定的矩形区域内绘制文本。

擦除矩形区域

cpp 复制代码

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

    // 绘制图片
    QRect rect(10, 10, 400, 300);
    QImage image(":/JINGMAO.jpg");
    painter.drawImage(rect, image);

    // 设置窗口背景色
    setPalette(QPalette(Qt::red));

    // 擦除矩形区域
    QRect rect2(100, 100, 200, 100);
    painter.eraseRect(rect2);
}

解释:

painter.eraseRect 擦除指定的矩形区域内容。

填充矩形

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 填充矩形
    QRect rect(10, 10, 400, 300);
    painter.fillRect(rect, Qt::blue);
}

解释:

painter.fillRect 使用指定的颜色填充矩形区域。

填充路径

cpp 复制代码

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

    // 设置画笔
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

    // 定义路径并填充
    QRect rect(10, 10, 400, 300);
    QPainterPath path;
    path.addRect(rect);
    path.addEllipse(rect);
    painter.fillPath(path, Qt::blue);
}

解释:

QPainterPath 用于定义复杂的路径。
painter.fillPath 使用指定的颜色填充路径。

通过以上这些代码示例和详细解释，相信你已经掌握了在Qt中进行各种图形绘制的方法。Qt的绘图功能非常强大，能够满足各种复杂的绘图需求。