Qt_Demo3：实现棋盘

1  简介

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

Github：https://github.com/zhengcixi/Qt_Demo/tree/master/chess

说明：实现一个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 = -1;
    chessY = -1;
}

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

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

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

    //画棋盘
    for (int i = 0; i <= 8; i++) {
        //画横线
        p.drawLine(startX, startY+gridY*i, startX+8*gridX, startY+gridY*i);
        //画竖线
        p.drawLine(startX+i*gridX, startY, startX+i*gridX, startY+gridY*8);
    }
    //画棋子
    if(chessX != -1 && chessY != -1) {
        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+8*gridX
       && y >= startY && y <= startX+8*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 = 0);
    ~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

运行测试：

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