当前位置：首页 > news >正文

Qt 绘图详解

news 2025/7/22 11:45:16

文章目录

- - 头文件和构造函数
  - 启用反锯齿功能
  - 绘制矩形
  - 绘制圆角矩形
  - 绘制椭圆
  - 绘制圆弧
  - 绘制弦
  - 绘制凸多边形
  - 绘制图片
  - 绘制直线
  - 绘制多条直线
  - 绘制多点连接的线
  - 绘制路径
  - 绘制扇形
  - 绘制点
  - 绘制文本
  - 擦除矩形区域
  - 填充矩形
  - 填充路径

头文件和构造函数

#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;
}

启用反锯齿功能

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

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

绘制矩形

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) 使用指定的画笔和画刷绘制矩形。

绘制圆角矩形

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 指定了圆角的水平和垂直半径。

绘制椭圆

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 使用指定的矩形边界绘制椭圆。

绘制圆弧

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度。

绘制弦

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 绘制弦，弦是一个连接圆弧两个端点的线段。

绘制凸多边形

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 数组定义了多边形的顶点。

绘制图片

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 在指定的矩形区域内绘制图片。

绘制直线

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 绘制直线。

绘制多条直线

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 绘制多条直线。

绘制多点连接的线

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 绘制多点连接的线。

绘制路径

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 对象定义的路径。

绘制扇形

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 绘制扇形。

绘制点

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 绘制多个点。

绘制文本

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 在指定的矩形区域内绘制文本。

擦除矩形区域

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 擦除指定的矩形区域内容。

填充矩形

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 使用指定的颜色填充矩形区域。

填充路径

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);
}