Qt_Demo_3：實現棋盤

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

運行測試：

注意看左下角打印的坐標，就是我們當前棋子所在棋盤的坐標。