使用QT简单制作中国象棋之棋盘

最近在网上看了一些QT的教学视频,就想着将学习的知识运用一下,学到绘图后就想着制作一个简易的中国象棋。目前只做出了棋盘,大概有点样子了。
本例使用的QWidget作为父类创建的加了UI的项目,但目前UI没怎么用,就图方便设置了一下Widget的Size。
在这里插入图片描述
Widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
protected:
    // 绘图事件
    void paintEvent(QPaintEvent *) override;
    // 鼠标按下,移动事件
    void mousePressEvent(QMouseEvent *event) override;
    void mouseMoveEvent(QMouseEvent*)override;
private:
    Ui::Widget *ui;
    QPoint point;
    // 棋子大小 即 格子大小
    int ChessSize;
};
#endif // WIDGET_H

Widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>
#include <QMouseEvent>
#include <QPen>
#include <QFont>
#include <QBrush>
#include <QColor>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 设置 棋子大小, 即格子大小
    this->ChessSize = 50;

}

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

void Widget::paintEvent(QPaintEvent *){
    QPen pen;
    pen.setWidth(3);
    pen.setColor(Qt::black);
    QPainter p(this);
    p.setPen(pen);
    QBrush brush;
    brush.setColor(QColor(216, 180, 80));
    brush.setStyle(Qt::SolidPattern);
    p.setBrush(brush);

//    p.drawPixmap(rect(),QPixmap(":/ChessImage/back1.jpg"));

    // 取窗口的左上角坐标(left, top) 和 宽高(right, bottom)
    int top = rect().top();
    int bottom = rect().bottom();
    int left = rect().left();
    int right = rect().right();

    // 通过画刷绘制背景, 并取消画刷(防止后面绘制其他图形继续被刷,当然本项目做的简易中国象棋用于练手,应该不会使用了)
    p.drawRect(left, top, right, bottom);
    p.setBrush(Qt::NoBrush);

    // 绘制棋盘的边框
    p.drawLine(left + ChessSize - 5, top + ChessSize - 5, left + ChessSize - 5, bottom - ChessSize + 5);
    p.drawLine(left + ChessSize - 5, top + ChessSize - 5, right - ChessSize + 5, top + ChessSize - 5);
    p.drawLine(right - ChessSize + 5, top + ChessSize - 5, right - ChessSize + 5, bottom - ChessSize + 5);
    p.drawLine(left + ChessSize - 5, bottom - ChessSize + 5, right - ChessSize + 5, bottom - ChessSize + 5);
    pen.setWidth(2);
    p.setPen(pen);

    // 绘制棋盘中的细线
    for(int x = left + ChessSize; x < right; x += ChessSize){
        for(int y = top + ChessSize; y < bottom; y += ChessSize){
            if(x == left + ChessSize){
                     p.drawLine(x, y, right - ChessSize, y);
            }
            if(y == top + ChessSize){
                    p.drawLine(x, y, x, (bottom - ChessSize) / 2);
                    p.drawLine(x, (bottom + ChessSize) / 2, x, bottom - ChessSize);
            }

        }
    }
   p.drawLine((right/2 - ChessSize), top + ChessSize, (right/2 + ChessSize), top + 3*ChessSize);
   p.drawLine((right/2 + ChessSize), top + ChessSize, (right/2 - ChessSize), top + 3*ChessSize);
   p.drawLine((right/2 - ChessSize), bottom - ChessSize, (right/2 + ChessSize), bottom - 3*ChessSize);
   p.drawLine((right/2 + ChessSize), bottom - ChessSize, (right/2 - ChessSize), bottom - 3*ChessSize);

   // 设置分界河标志
   p.setFont(QFont("Arial", 25));
   p.drawText(QPoint(right/2-100, bottom/2+15), "楚河         汉界");

   // 设置炮兵和步兵站位的 '#' 字
   pen.setWidth(4);
   p.setPen(pen);
   int x, y;
   QPoint point[3];
   for(int j = 0; j < 2; j++ )
   for(int i = 1; i <= 9; i++){
       if(i == 4 || i == 6)
           continue;
       x = left + i*ChessSize; // x坐标不会因为上下半区而改变
       if(j == 0){   // 处理上半区
           if(i % 2 == 0) // 处理上半区炮兵的 '#'字
               y = top + 3*ChessSize;
           else           // 处理上半区步兵的'#'字
               y = top + 4*ChessSize;
       }
       else{  // 处理下半区
           if(i % 2 == 0) // 处理下半区炮兵的 '#'字
               y = bottom - 3*ChessSize;
           else           // 处理下半区步兵的 '#'字
               y = bottom - 4*ChessSize;
       }
       // 单独处理两边兵的 '#'字(因为只有一半)
       // drawPokyline第一个参数为数组首地址,第二个参数为数组长度,稍微熟悉点C++就懂了
       // 它的功能是将数组的点依次连接但不填充,如颜色等。(第一次使用,参考的网上)
       if(i == 1){
           point[0] = QPoint(x+5, y-15);
           point[1] = QPoint(x+5, y-5);
           point[2] = QPoint(x+15, y-5);
           p.drawPolyline(point,3);
           point[0] = QPoint(x+5, y+15);
           point[1] = QPoint(x+5, y+5);
           point[2] = QPoint(x+15, y+5);
           p.drawPolyline(point,3);
           continue;
       }
       if(i == 9){
           point[0] = QPoint(x-5, y-15);
           point[1] = QPoint(x-5, y-5);
           point[2] = QPoint(x-15, y-5);
           p.drawPolyline(point,3);
           point[0] = QPoint(x-5, y+15);
           point[1] = QPoint(x-5, y+5);
           point[2] = QPoint(x-15, y+5);
           p.drawPolyline(point,3);
           continue;
       }
       // 其他部分正常(炮兵和中间步兵的 '#'字)
       point[0] = QPoint(x+5, y-15);
       point[1] = QPoint(x+5, y-5);
       point[2] = QPoint(x+15, y-5);
       p.drawPolyline(point,3);
       point[0] = QPoint(x+5, y+15);
       point[1] = QPoint(x+5, y+5);
       point[2] = QPoint(x+15, y+5);
       p.drawPolyline(point,3);
       point[0] = QPoint(x-5, y-15);
       point[1] = QPoint(x-5, y-5);
       point[2] = QPoint(x-15, y-5);
       p.drawPolyline(point,3);
       point[0] = QPoint(x-5, y+15);
       point[1] = QPoint(x-5, y+5);
       point[2] = QPoint(x-15, y+5);
       p.drawPolyline(point,3);
   }
}
// 鼠标事件用于后面深入制作棋子的移动等.
void Widget::mousePressEvent(QMouseEvent *e){

}

void Widget::mouseMoveEvent(QMouseEvent *e){

}

效果图如下:
在这里插入图片描述

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的例子,使用Qt绘制中国象棋棋盘。 首先,我们需要在Qt的窗口中创建一个QPainter对象,然后通过QPainter对象绘制棋盘。 ```cpp void ChessBoard::paintEvent(QPaintEvent *event) { QPainter painter(this); int squareSize = width() / 10; // 绘制棋盘 painter.setBrush(QColor("#D18B47")); painter.drawRect(0, 0, 9 * squareSize, 10 * squareSize); painter.fillRect(squareSize, squareSize, 8 * squareSize, 8 * squareSize, QColor("#F0D9B5")); for (int i = 0; i < 9; ++i) { painter.drawLine((i + 1) * squareSize, squareSize, (i + 1) * squareSize, 9 * squareSize); } painter.drawLine(squareSize, squareSize, 9 * squareSize, squareSize); painter.drawLine(squareSize, 9 * squareSize, 9 * squareSize, 9 * squareSize); // 绘制棋盘上的点 painter.setBrush(Qt::black); painter.drawEllipse(QPoint(4 * squareSize, 3 * squareSize), 5, 5); painter.drawEllipse(QPoint(6 * squareSize, 3 * squareSize), 5, 5); painter.drawEllipse(QPoint(4 * squareSize, 6 * squareSize), 5, 5); painter.drawEllipse(QPoint(6 * squareSize, 6 * squareSize), 5, 5); } ``` 在上面的代码中,我们使用QPainter对象的drawRect()和fillRect()方法绘制棋盘的外框和内部,使用drawLine()方法绘制棋盘上的线条,使用drawEllipse()方法绘制棋盘上的点。 在这个例子中,我们将棋盘的大小设置为窗口宽度的10分之9,并将棋盘上每个格子的大小设置为窗口宽度的10分之1。 ```cpp int squareSize = width() / 10; ``` 最后,我们需要在QWidget的构造函数中启用绘图功能: ```cpp ChessBoard::ChessBoard(QWidget *parent) : QWidget(parent) { setFixedSize(9 * squareSize, 10 * squareSize); } ``` 完整的代码可以参考以下代码: ```cpp #include <QtWidgets> class ChessBoard : public QWidget { public: ChessBoard(QWidget *parent = 0) : QWidget(parent) { setFixedSize(9 * squareSize, 10 * squareSize); } protected: void paintEvent(QPaintEvent *event) override { QPainter painter(this); int squareSize = width() / 10; // 绘制棋盘 painter.setBrush(QColor("#D18B47")); painter.drawRect(0, 0, 9 * squareSize, 10 * squareSize); painter.fillRect(squareSize, squareSize, 8 * squareSize, 8 * squareSize, QColor("#F0D9B5")); for (int i = 0; i < 9; ++i) { painter.drawLine((i + 1) * squareSize, squareSize, (i + 1) * squareSize, 9 * squareSize); } painter.drawLine(squareSize, squareSize, 9 * squareSize, squareSize); painter.drawLine(squareSize, 9 * squareSize, 9 * squareSize, 9 * squareSize); // 绘制棋盘上的点 painter.setBrush(Qt::black); painter.drawEllipse(QPoint(4 * squareSize, 3 * squareSize), 5, 5); painter.drawEllipse(QPoint(6 * squareSize, 3 * squareSize), 5, 5); painter.drawEllipse(QPoint(4 * squareSize, 6 * squareSize), 5, 5); painter.drawEllipse(QPoint(6 * squareSize, 6 * squareSize), 5, 5); } private: int squareSize = width() / 10; }; int main(int argc, char *argv[]) { QApplication app(argc, argv); ChessBoard board; board.show(); return app.exec(); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值