Qt 绘图详解

  • 开发
  • 23

文章目录

头文件和构造函数

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

解释:

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

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

阅读全部

相关推荐

  1. Qt 绘图详解

    2024-07-10 19:52:06       24 阅读

  7. Qt 绘图（学习记录）

    2024-07-10 19:52:06       32 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-10 19:52:06       67 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-10 19:52:06       72 阅读

  9. 在Django里面运行非项目文件

    2024-07-10 19:52:06       58 阅读

  19. Python语言-面向对象

    2024-07-10 19:52:06       69 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-07-10 19:52:06       64 阅读

热门阅读

  3. MySQL篇七：复合查询

    2024-07-10 19:52:06       26 阅读

  4. [GDOUCTF 2023]Tea writeup

    2024-07-10 19:52:06       27 阅读

  8. 解决 Docker 安装时“无法获取 dpkg 前端锁”错误的有效方法

    2024-07-10 19:52:06       19 阅读

  10. 软件开发C#(Sharp)总结（续）

    2024-07-10 19:52:06       17 阅读

  16. CSS 样式链接的多方面应用与最佳实践

    2024-07-10 19:52:06       22 阅读

  18. Vue 3＜script setup＞使用v-for渲染数组中的元素,根据传入id删除数组元素（filter方法根据元素id过滤数组中的元素）

    2024-07-10 19:52:06       19 阅读

  19. spring cloud gateway客户端websocket断开连接，服务侧连接没有关闭的问题处理

    2024-07-10 19:52:06       19 阅读

  21. 西门子7MB2335-0AL00-3AA1

    2024-07-10 19:52:06       19 阅读