Qt_Demo3：实现棋盘

1  简介

参考视频：https://www.bilibili.com/video/BV1XW411x7NU?p=53

说明：实现一个8*8的棋盘，点击棋盘的任意位置显示一个表情，并打印出当前的坐标（相对棋盘）。界面如下：

2  实现过程

（1）画棋盘的线

我们把当前窗口均分为10份，得到一个棋盘方格的横纵线的大小，记为gridX，gridY，另外记横轴起始坐标为startX=gridX，纵轴起始坐标为startY=gridY。

先画出横线，一共9条，第一条横线的起始坐标为（startX, startY），终点坐标为（startX+8*gridX, startY）;

第二条横线的起始坐标为（startX, startY+gridY），终点坐标为（startX+8*gridX, startY+gridY）；

以此类推，可得出全部的横线的起始和终点坐标。

同理，画竖线也是一样的道理：

第一条竖线的起始坐标为（startX, startY），终点坐标为（startX, startY+8*gridY）；

第二条竖线的起始坐标为（startX+gridX, startY），终点坐标为（startX+gridX, startY+8*grid）；

（2）画棋子

我们先获取当前坐标，通过event->x()，event->y获得；

接着需要判断坐标是否在棋盘范围内：x >= startX && x <= startX+8*gridX && y >= startY && y <= startX+8*gridY；

接着算出x和y的坐标：chessX = (x - startX) / gridX;    chessY = (y - startY) / gridY;

然后进行绘制：p.drawPixmap(startX+chessX*gridX, startY+chessY*gridY, gridX, gridY, QPixmap("../image/face.png"));

3  代码及测试

下面给出完整代码：

widget.cpp

 #include "widget.h"
 #include "ui_widget.h"
 #include <QPaintEvent>
 #include <QMouseEvent>
 #include <QPainter>
 #include <QPen>
 #include <QDebug>

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

     chessX = -;
     chessY = -;
 }

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

 void Widget::paintEvent(QPaintEvent *event)
 {
     gridX = width()/;
     gridY = height()/;
     startX = gridX;
     startY = gridY;

     QPainter p(this);
     QPen pen;
     pen.setWidth();
     p.setPen(pen);

     //画棋盘
     for (int i = ; i <= ; i++) {
         //画横线
         p.drawLine(startX, startY+gridY*i, startX+*gridX, startY+gridY*i);
         //画竖线
         p.drawLine(startX+i*gridX, startY, startX+i*gridX, startY+gridY*);
     }
     //画棋子
     if(chessX != - && chessY != -) {
         p.drawPixmap(startX+chessX*gridX, startY+chessY*gridY, gridX, gridY, QPixmap("../image/face.png"));
     }

 }

 void Widget::mousePressEvent(QMouseEvent *event)
 {
     //获取点击的坐标
     int x = event->x();
     int y = event->y();
     // 要保证点击点在棋盘范围里面
     if(x >= startX && x <= startX+*gridX
        && y >= startY && y <= startX+*gridY) {
         // 棋盘的位置转换转换为坐标下标值
         // 类似于a[i][j]的i和j
         chessX = (x - startX) / gridX;
         chessY = (y - startY) / gridY;
         qDebug() << chessX << chessY;
         //更新窗口，间接调用paintEvent()
         update();
     }
 }

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 = );
     ~Widget();

     void paintEvent(QPaintEvent *event);
     void mousePressEvent(QMouseEvent *event);

 private:
     Ui::Widget *ui;

     int startX;
     int startY;
     int gridX;
     int gridY;
     int chessX;
     int chessY;

 };

 #endif // WIDGET_H

运行测试：

注意看左下角打印的坐标，就是我们当前棋子所在棋盘的坐标。