Qt 通过重写QWidget的paintEvent方法绘制一个象棋棋盘

最新推荐文章于 2025-03-07 14:12:54 发布
最新推荐文章于 2025-03-07 14:12:54 发布
阅读量273 收藏
点赞数 3
文章标签： qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55303547/article/details/140436409
版权

头文件

#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
#include <QPainter>
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
    Q_OBJECT
public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
    void paintEvent(QPaintEvent *e)override;
private:
    Ui::Widget *ui;
    int m_cellLength{90};//单元格大小
    int m_W{840};
    int m_H{920};
    QPoint m_topLeft{60,55};//棋盘起始位置
};
#endif // WIDGET_H

源文件

#include "widget.h"
#include "ui_widget.h"
#include <QPainterPath>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setMinimumHeight(m_H);
    this->setMaximumHeight(m_H);
    this->setMinimumWidth(m_W);
    this->setMaximumWidth(m_W);
}

Widget::~Widget()
{
    delete ui;
}
//重写绘图事件，绘制棋盘
void Widget::paintEvent(QPaintEvent *event){
    Q_UNUSED(event);
    QPainter painter(this);
    painter.setRenderHint(QPainter::LosslessImageRendering);

    //设置画笔
    QPen pen;
    pen.setWidth(4);//线条宽度
    pen.setColor(Qt::black);//画笔颜色
    pen.setStyle(Qt::SolidLine);//线条样式
    pen.setCapStyle(Qt::FlatCap);//端点样式
    pen.setJoinStyle(Qt::BevelJoin);//连接样式
    painter.setPen(pen);

    //设置画刷
    QBrush boardBrush;
    boardBrush.setStyle(Qt::NoBrush);//画刷填充样式
    painter.setBrush(boardBrush);//设置画刷
    QRect boardRect(m_topLeft.x(),m_topLeft.y(),m_cellLength*8,m_cellLength*9);//{60,55,720,810}
    painter.drawRect(boardRect);//绘制最外边的矩形
    //绘制矩形内的8条横线
    for(int i=1;i<9;i++){
        QLine line(m_topLeft.x(),m_topLeft.y()+i*m_cellLength,m_topLeft.x()+m_cellLength*8,m_topLeft.y()+i*m_cellLength);
        painter.drawLine(line);
    }
    //绘制上半部分的7条竖线
    for(int i=1;i<8;i++){
        QLine line(m_topLeft.x()+i*m_cellLength,m_topLeft.y(),m_topLeft.x()+i*m_cellLength,m_topLeft.y()+4*m_cellLength);
        painter.drawLine(line);
    }
    //绘制下半部分的7条竖线
    for(int i=1;i<8;i++){
        QLine line(m_topLeft.x()+i*m_cellLength,m_topLeft.y()+5*m_cellLength,m_topLeft.x()+i*m_cellLength,m_topLeft.y()+9*m_cellLength);
        painter.drawLine(line);
    }
    //绘制4条斜线
    QLine line(m_topLeft.x()+3*m_cellLength,m_topLeft.y(),m_topLeft.x()+5*m_cellLength,m_topLeft.y()+2*m_cellLength);
    painter.drawLine(line);
    line.setLine(m_topLeft.x()+3*m_cellLength,m_topLeft.y()+7*m_cellLength,m_topLeft.x()+5*m_cellLength,m_topLeft.y()+9*m_cellLength);
    painter.drawLine(line);
    line.setLine(m_topLeft.x()+3*m_cellLength,m_topLeft.y()+2*m_cellLength,m_topLeft.x()+5*m_cellLength,m_topLeft.y());
    painter.drawLine(line);
    line.setLine(m_topLeft.x()+3*m_cellLength,m_topLeft.y()+9*m_cellLength,m_topLeft.x()+5*m_cellLength,m_topLeft.y()+7*m_cellLength);
    painter.drawLine(line);
    //楚河汉界
    QFont font;
    font.setPointSize(50);//设置字体大小
    painter.setFont(font);
    painter.drawText(QRect(m_topLeft.x(),m_topLeft.y()+4*m_cellLength,m_topLeft.x()+8*m_cellLength,m_cellLength),
                     tr("\t\t\t\t\t\t\t楚\t河\t\t\t\t\t\t\t汉\t界"));//第一个参数为矩形，第二个参数为矩形内的文字
    //绘制炮跟卒位置的角
    int angleLength=15;//边长
    int angleSpace=5;//间隔
    //初始位置,与左上角重合
    QPoint points[]{QPoint(m_topLeft.x()+angleLength,m_topLeft.y()),
                    QPoint(m_topLeft.x(),m_topLeft.y()),
                    QPoint(m_topLeft.x(),m_topLeft.y()+angleLength)};
    QPainterPath anglePath;
    anglePath.moveTo(points[0]);
    anglePath.lineTo(points[1]);
    anglePath.lineTo(points[2]);

    //右下三角,先绘制上半棋盘的部分，再绘制下半棋盘的部分
    painter.translate(angleSpace,3*m_cellLength+angleSpace);
    painter.save();//保存位置
    for(int i=0;i<4;i++){
        painter.drawPath(anglePath);//绘制
        painter.translate(0,3*m_cellLength);//向下移动3个单元格
        painter.drawPath(anglePath);//绘制
        painter.translate(0,-3*m_cellLength);
        painter.translate(2*m_cellLength,0);//向右移动2个单元格
    }
    //右上三角,先绘制上半棋盘的部分，再绘制下半棋盘的部分
    painter.restore();//恢复位置
    painter.translate(angleSpace,m_cellLength+angleLength);
    for(int i=0;i<4;i++){
        painter.rotate(-90);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(90);//恢复原来的角度
        painter.translate(0,3*m_cellLength);//向下移动3个单元格
        painter.rotate(-90);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(90);//恢复原来的角度
        painter.translate(0,-3*m_cellLength);
        painter.translate(2*m_cellLength,0);//向右移动2个单元格
    }
    //左上三角,先绘制上半棋盘的部分，再绘制下半棋盘的部分
    painter.translate(-5*m_cellLength+3*angleSpace,-angleLength+2*angleSpace);
    for(int i=0;i<4;i++){
        painter.rotate(-180);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(180);//恢复原来的角度
        painter.translate(0,3*m_cellLength);//向下移动3个单元格
        painter.rotate(-180);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(180);//恢复原来的角度
        painter.translate(0,-3*m_cellLength);
        painter.translate(2*m_cellLength,0);//向右移动2个单元格
    }
    //左下三角,先绘制上半棋盘的部分，再绘制下半棋盘的部分
    painter.translate(-8*m_cellLength-angleLength+2*angleSpace,-m_cellLength-3*angleSpace);
    for(int i=0;i<4;i++){
        painter.rotate(90);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(-90);//恢复原来的角度
        painter.translate(0,3*m_cellLength);//向下移动3个单元格
        painter.rotate(90);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(-90);//恢复原来的角度
        painter.translate(0,-3*m_cellLength);
        painter.translate(2*m_cellLength,0);//向右移动2个单元格
    }
    //炮右下三角,先绘制上半棋盘的部分，再绘制下半棋盘的部分
    painter.translate(-10*m_cellLength-angleLength,-m_cellLength+angleSpace);
    painter.save();//保存位置
    for(int i=0;i<2;i++){
        painter.drawPath(anglePath);//绘制
        painter.translate(0,5*m_cellLength);//向下移动5个单元格
        painter.drawPath(anglePath);//绘制
        painter.translate(0,-5*m_cellLength);
        painter.translate(6*m_cellLength,0);//向右移动6个单元格
    }
    //炮右上三角,先绘制上半棋盘的部分，再绘制下半棋盘的部分
    painter.restore();//恢复位置
    painter.translate(angleSpace,m_cellLength+angleLength);
    for(int i=0;i<2;i++){
        painter.rotate(-90);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(90);//恢复原来的角度
        painter.translate(0,5*m_cellLength);//向下移动5个单元格
        painter.rotate(-90);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(90);//恢复原来的角度
        painter.translate(0,-5*m_cellLength);
        painter.translate(6*m_cellLength,0);//向右移动6个单元格
    }
    //炮左上三角,先绘制上半棋盘的部分，再绘制下半棋盘的部分
    painter.translate(-11*m_cellLength+3*angleSpace,-angleLength+2*angleSpace);
    for(int i=0;i<2;i++){
        painter.rotate(-180);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(180);//恢复原来的角度
        painter.translate(0,5*m_cellLength);//向下移动5个单元格
        painter.rotate(-180);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(180);//恢复原来的角度
        painter.translate(0,-5*m_cellLength);
        painter.translate(6*m_cellLength,0);//向右移动6个单元格
    }
    //炮左下三角,先绘制上半棋盘的部分，再绘制下半棋盘的部分
    painter.translate(-12*m_cellLength-angleLength+2*angleSpace,-m_cellLength-3*angleSpace);
    for(int i=0;i<2;i++){
        painter.rotate(90);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(-90);//恢复原来的角度
        painter.translate(0,5*m_cellLength);//向下移动5个单元格
        painter.rotate(90);//逆时针旋转90度
        painter.drawPath(anglePath);//绘制
        painter.rotate(-90);//恢复原来的角度
        painter.translate(0,-5*m_cellLength);
        painter.translate(6*m_cellLength,0);//向右移动6个单元格
    }
}

效果图

在这里插入图片描述

Qt案例：画棋盘
Bluenapa的博客
04-21 1304
#ifndef WIDGET_H #define WIDGET_H #include <QWidget> class Widget : public QWidget { Q_OBJECT public: Widget(QWidget *parent = 0); ~Widget(); protected: void paintEvent(...
Qt学习笔记二：Qt通过重写paintEvent方法写一个自定义选择框
chexiaohui6306的博客
07-09 7095
Qt通过重写paintEvent方法写一个自定义选择框 这几天导师下发任务，让我一个月之内熟悉一个通过Qt Widget制作的项目，第一眼看到项目，我是懵逼的。才知道自己写的那些几百行的代码算什么玩意了。看到项目里密密麻麻继承QWidget的控件，然后各种重写paintEvent方法，才发现...
Qt棋盘绘制（9x9）源码
12-29
利用Qt5.8绘制了9行9列的棋盘，添加了背景，通过鼠标按下事件可实现一个小图片在方格中的移动，带注释，适合新手练习。
void paintEvent(QPaintEvent *event) override这个是什么意思呢
Yy468545的博客
03-07 1064
就像是一个“通知”，告诉你的程序控件需要重新绘制，并且提供了一些关于需要绘制的内容的信息。override：是一个“标记”，告诉编译器你在这里改变了父类的行为，让程序知道这个函数的行为可能和父类不一样。希望用这种简单的类比能帮助你更好地理解这两个概念！如果还有疑问，可以继续问我哦！*event是什么呢。为什么是它我们来更详细地解释一下*event是什么，以及为什么在中会用到它。
QT窗口绘图，重写绘图事件QPaintEvent
weixin_40355471的博客
11-30 7285
如果在窗口绘图，必须在绘图事件里实现，绘图事件内部自动调用，窗口需要重绘的时候（状态改变） widget.h #ifndef WIDGET_H #define WIDGET_H #include <QWidget> namespace Ui { class Widget; } class Widget : public QWidget { Q_OBJECT public: explicit Widget(QWidget *parent = nullptr); ~Widge
Qt重写QWidget实现按钮进度条
06-19
通过重写QWidget实现在按钮上的进度条,点击按钮就会在按钮上绘制进度
重写 QT - 虚函数 void paintEvent()；
Alexandershy Blog
01-11 2511
基于 C++ QT 的 SuperTools 开发之路（一)；
qt重写paintEvent实现鼠标拖动绘制直线、矩形和圆
03-09
在代码中的体现就是定义了一个基类myShape类，其他所有的图像类都继承自这个基类，然后在每个子类中都添加了drawShape（）方法，这样在界面的paintEvent(QPaintEvent *event)方法中绘图的时候就不需要分各种图形来...
Qt 中的重载 paintEvent 方法：示例和解析
m0_66472815的博客
07-16 2204
学了qss之后会了一些美化，但是发现还有很多qss没法实现，那么这个文章就适合你了
重写 QWidget 中的 paintEvent() 处理绘图事件
热门推荐
Goallegoal的博客
12-01 1万+
重写 QWidget 中的 paintEvent() 处理绘图事件 Qt的绘图系统允许使用相同的 API在屏幕和其它打印设备上进行绘制。整个绘图系统基于QPainter，QPainterDevice和QPaintEngine三个类。 QPainter用来执行绘制的操作； QPaintDevice是一个二维空间的抽象，这个二维空间允许QPainter在其上面进行绘制，也就是QPainter工作的空间； QPaintEngine提供了画笔（QPainter）在不同的设备上进行绘制的统一的接口。QPaintEn
Qt 5 重写QWidget自定义有边框有标题的PWidget
Peyton's Blog
06-20 1126
# 在 Qt 开发中遇到了想给一些控件归类至一个框框内 # 存在多个需求，所以就重写了一个 # 设定了三种尺寸，PW_SAMLL PW_MEDIUM PM_LARGE
Qt开发——重写PaintEvent 绘制横向波形图
sxycylq的博客
07-14 541
qt 显示波形图 横向图 坐标轴变换
Qt 绘图设备，QPixmap 和QImage 相互转化
sky_share的博客
10-09 1668
Qt的绘图系统允许使用相同的API在屏幕和其他打印设备上进行绘制。整个绘图系统基于 QPainter，QPainterDevice 和 QPaintEngine三个类。 QPainter用来执行绘制的操作；QPaintDevice是一个二维空间的抽象，这个二维空间允许QPainter在其上面进行绘制，也就是QPainter工作的时间；QPaintEngine提供了画笔（QPainter）在不同的...
重写Qt中的Widget移动事件
电脑管家
04-25 968
方法中，我们计算了Widget移动的距离，并更新了Widget的位置；使用以上示例代码，您便可以成功地重写Qt中的Widget移动事件了。方法中，我们记录了鼠标点击时Widget的位置；在这个示例代码中，我们创建了一个名为。的自定义Widget，并重写了其中的。方法中，我们释放鼠标并完成了移动。
Qt 学习笔记（5）绘图 五子棋游戏
开到荼蘼的博客
01-16 2183
在上一篇博客C++ Qt学习笔记（4）绘图中介绍了Qt中的绘图方法，基于上一篇的博客的知识，使用QPainter设计一个五子棋的棋盘，后续会完成五子棋的游戏设计。 1. 棋盘的设计 首先需要绘制棋盘的界面，这里采用的方法是，首先需要设定棋盘的大小，定义BOARD_WIDTH,以及BOARD_HEIGHT表示棋盘的大小，CELL_SIZE表示棋盘中每个格子的大小，单位为像素...
Qt使用paintEvent重写实现无边框窗口的阴影
weixin_43359674的博客
09-29 539
Qt 无边框 阴影
重写qwidget的paintEvent事件在qwidget中绘制两个饼状图
ml29895063的博客
08-25 263
重写qwidget的paintEvent事件在qwidget中绘制两个饼状图
Qt之PaintEvent
Roads
07-30 8723
从Qt官方给的例程可以看出，如果想将绘图加入事件循环共有两种方式：绘图事件和定时器事件两种方式，通常使用前者。 (一) painterEvent 在绘图事件中，如果想使用update()刷新页面是行不通的，除非使用新的定时器定时刷新页面。painterEvent来自QWidget的virtual protected function，其他一些控件例如QLabel、QLineEdit、QMenu...
Window系统下开发Qt（11）-- Qt事件重写
Fisher
10-24 1441
在使用Qt的事件机制时，应该按照以下思路，从低级到高级进行重写，添加自己的业务逻辑。 重写paintEvent、mousePressEvent等事件处理函数。这是最普通、最简单的形式，同时功能也最简单。 重写event函数。event函数是所有对象的事件入口，QObject和QWidget中的实现，默认是把事件传递给特定的事件处理函数。 在特定对象上面安装事件过滤器。该过滤器仅过滤该对象接收到的事件。 在QCoreApplication::instance()上面安装事件过滤器。该过滤器将过滤所有对
qt重写paintEvent绘制曲线
最新发布
03-08
### 重写 `paintEvent` 方法绘制曲线 在 Qt 中，为了实现在窗口部件上绘制自定义图形（如曲线），通常的做法是在继承自 `QWidget` 的类中重写 `paintEvent` 函数。此函数会在窗口需要更新显示内容时由框架自动调用[^2]。 下面是一个简单的例子展示如何利用贝塞尔曲线来创建平滑路径并将其渲染到屏幕上： ```cpp #include <QPainter> #include <QWidget> class CurveWidget : public QWidget { protected: void paintEvent(QPaintEvent *) override; }; void CurveWidget::paintEvent(QPaintEvent *) { QPainter painter(this); // 设置抗锯齿选项使线条更光滑 painter.setRenderHint(QPainter::Antialiasing); QPen pen(Qt::blue, 3); painter.setPen(pen); // 创建控制点列表用于构建二次或三次贝塞尔曲线 QVector<QPointF> points = { QPointF(50, 100), QPointF(150, 50), QPointF(250, 180), QPointF(350, 90) }; // 使用 QPainterPath 来描述复杂的形状 QPainterPath path(points.first()); for (int i=1; i<points.size()-2;i+=2){ qreal dx1=(points[i].x()-points[i-1].x())*0.4f; qreal dy1=(points[i].y()-points[i-1].y())*0.4f; qreal dx2=(points[i+1].x()-points[i].x())*0.4f; qreal dy2=(points[i+1].y()-points[i].y())*0.4f; path.cubicTo( points[i-1]+QPointF(dx1,dy1), points[i]-QPointF(-dx2,-dy2), points[i]); if(i==points.size()-3){ path.quadTo((points.last()+points.at(i))/2, points.last()); } } painter.drawPath(path); } ``` 上述代码片段展示了如何使用 `QPainter`, `QVector<QPointF>` 和 `QPainterPath` 结合起来生成一条经过给定点集的连续曲线。这里采用的是分段三阶贝塞尔曲线连接相邻两点的方式，在最后一个区间则应用二阶贝塞尔曲线以确保终点处不会出现突兀的变化[^1]。 #### 关键技术要点说明： - **抗锯齿**：通过设置 `setRenderHint(QPainter::Antialiasing)` 可让画布上的几何对象边缘更加柔和自然。 - **颜色与宽度定制化**：借助于 `QPen` 对象可以方便地调整所绘线条的颜色以及粗细程度。 - **复杂路径表示法**：运用 `QPainterPath` 能够轻松表达任意形态的闭合或多边形轮廓，并支持多种类型的弧度转换操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

平面海螺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值