第一篇文章，简述UI界面的制作与鼠标移动事件的响应，这一部分功能的代码在后面有贴出，整个项目完整功能的代码在后面
一、通过UI界面做几个按钮及标签
一些空间的字体、颜色、背景色在styleSheet中设置
二、设置棋盘
1、画出背景色与网格
void MainWindow::paintEvent(QPaintEvent*){
QPainter painter(this);
//反走样
painter.setRenderHint(QPainter::Antialiasing, true);
//画棋盘
//背景上色
QBrush brush;
brush.setColor(QColor(213, 176, 141));
brush.setStyle(Qt::SolidPattern);
painter.setBrush(brush);
//边框
QPen pen = painter.pen();
painter.setPen(pen);
//大背景
painter.drawRect(30, 30, 740, 740);
//棋盘网格线
pen.setColor(Qt::black);
pen.setWidth(1);
painter.setPen(pen);
for(int i = 0; i < 15; i++){
painter.drawLine(50, 50 + i * 50, 750, 50 + i * 50);
painter.drawLine(50 + 50 * i, 50, 50 + 50 * i, 750);
}
}
效果图如下
2、设置棋子格式
.h文件中声明int chessBoard[15][15] = {0};//棋盘大小
因为是静态数组，大小固定，所以用int比vector方便
//画棋盘上面的五个黑点
brush.setColor(Qt::black);
painter.setBrush(brush);
//rect参数的意思是 左上角坐标为（195,195）大小为10*10
painter.drawRect(195, 195, 10, 10);
painter.drawRect(595, 195, 10, 10);
painter.drawRect(195, 595, 10, 10);
painter.drawRect(595, 595, 10, 10);
painter.drawRect(395, 395, 10, 10);
//画棋子
brush.setStyle(Qt::SolidPattern);
for(int i = 0; i < 15; i++)
for(int j = 0; j < 15; j++){
if(chessBoard[i][j] == 1){
brush.setColor(Qt::black);
painter.setBrush(brush);
//以Point为圆心画个圆
painter.drawEllipse(QPoint(50 + i * 50, 50 + j * 50), 20, 20);
}
else if(chessBoard[i][j] == 2){
brush.setColor(Qt::white);
painter.setPen(Qt::NoPen);
painter.setBrush(brush);
painter.drawEllipse(QPoint(50 + i * 50, 50 + j * 50), 20, 20);
}
}
效果如下
添加鼠标事件，如果鼠标移动到没有棋子的框附近，则出现绿色效果如下
//在paintEvent中添加如下代码
if((mouseX >= 0 && mouseX <= 14) && (mouseY >= 0 && mouseY <= 14) && chessBoard[mouseX][mouseY] == 0){
//第四个参数指的是透明度，255为全色，小于255可以看见图像后面的内容，等于0或大于255时效果一样，全透明
brush.setColor(QColor(0,255,0,150));
painter.setPen(Qt::NoPen);
painter.setBrush(brush);
painter.drawEllipse(QPoint(mouseX * 50 + 50, mouseY * 50 + 50), 20, 20);
}
void MainWindow::mouseMoveEvent(QMouseEvent *e){
//获得鼠标在哪个网格的位置
mouseX = (e->x() + 25) / 50 - 1;
mouseY = (e->y() + 25) / 50 - 1;
update();
}
当然要在构造函数那里进行初始化，代码如下：
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
ui->centralwidget->setMouseTracking(true);//这一行看下面的解释
this->setMouseTracking(true);
}
在Qt中要捕捉鼠标移动事件需要重写MouseMoveEvent，但是MouseMoveEvent为了不太耗资源，默认状态下是要鼠标按下才能捕捉到。要想鼠标不按下时的移动也能捕捉到，需要setMouseTracking(true)。
QWidget中使用是没有问题的，但是，对于QMainWindow即使使用了setMouseTracking(true)依然无法捕捉到鼠标没有按下的移动，只有在鼠标按下是才能捕捉。
解决办法：要先把QMainWindow的CentrolWidget使用setMouseTracking(true)开启移动监视。然后在把QMainWindow的setMouseTracking(true)开启监视。之后就一切正常了。
原因：CentrolWIdget是QMainWindow的子类，你如果在子类上响应鼠标事件，只会触发子类的mouseMoveEvent，根据C++继承和重载的原理，所以子类也要setMouseTracking(true); 所以如果你想响应鼠标事件的控件被某个父控件包含，则该控件及其父控件或容器也需要setMouseTracking(true);
目前为止的代码，后续会有些许改动
mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QPaintEvent>
#include <QPainter>
#include <vector>
#include <stack>
#include <QString>
#include <QMouseEvent>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
using namespace std;
class MainWindow : public QMainWindow
{
Q_OBJECT
private:
int chessBoard[15][15] = {0};//棋盘大小
//vector<vector<int> > chessBoard(15, vector<int>(15, -1));
int player = 0;//玩家，偶数为第一个，奇数为第二个
int mouseX, mouseY; //鼠标的位置
int currentX, currentY;//上次落子点的位置
bool lock; //锁住棋盘
bool flag = false; // true为开始， false为结束
int game_type; // 1为PVC, 2为PVP
QString winner;
stack<QPoint > sta; //放棋子的栈，便于悔棋
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
//绘图事件
void paintEvent(QPaintEvent*);
//鼠标移动事件
void mouseMoveEvent(QMouseEvent* e);
//鼠标按压事件
void mousePressEvent(QMouseEvent* e);
private:
Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// chessBoard[7][7] = 1;
// chessBoard[12][8] = 2;
lock = false;
flag = true;
ui->centralwidget->setMouseTracking(true);
this->setMouseTracking(true);
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::paintEvent(QPaintEvent*){
QPainter painter(this);
//反走样
painter.setRenderHint(QPainter::Antialiasing, true);
//画棋盘
//背景上色
QBrush brush;
brush.setColor(QColor(213, 176, 141));
brush.setStyle(Qt::SolidPattern);
painter.setBrush(brush);
//边框
QPen pen = painter.pen();
painter.setPen(pen);
//大背景
painter.drawRect(30, 30, 740, 740);
//棋盘网格线
pen.setColor(Qt::black);
pen.setWidth(1);
painter.setPen(pen);
for(int i = 0; i < 15; i++){
painter.drawLine(50, 50 + i * 50, 750, 50 + i * 50);
painter.drawLine(50 + 50 * i, 50, 50 + 50 * i, 750);
}
//画棋盘上面的五个黑点
brush.setColor(Qt::black);
painter.setBrush(brush);
//rect参数的意思是 左上角坐标为（195,195）大小为10*10
painter.drawRect(195, 195, 10, 10);
painter.drawRect(595, 195, 10, 10);
painter.drawRect(195, 595, 10, 10);
painter.drawRect(595, 595, 10, 10);
painter.drawRect(395, 395, 10, 10);
//画棋子
brush.setStyle(Qt::SolidPattern);
for(int i = 0; i < 15; i++)
for(int j = 0; j < 15; j++){
if(chessBoard[i][j] == 1){
brush.setColor(Qt::black);
painter.setBrush(brush);
//以Point为圆心画个圆
painter.drawEllipse(QPoint(50 + i * 50, 50 + j * 50), 20, 20);
}
else if(chessBoard[i][j] == 2){
brush.setColor(Qt::white);
painter.setPen(Qt::NoPen);
painter.setBrush(brush);
painter.drawEllipse(QPoint(50 + i * 50, 50 + j * 50), 20, 20);
}
}
if(flag == false) return ;
//画最近一个落子的标识红框
pen.setColor(Qt::red);
pen.setWidth(1);
//这样可以把框框设置成空心的
painter.setPen(pen);
painter.setBrush(Qt::NoBrush);
painter.drawRect(currentX * 50 + 50 - 23, currentY * 50 + 50 -23, 46, 46);
//产生胜负结束游戏，锁棋
if(lock) return;
//鼠标移动标识
if((mouseX >= 0 && mouseX <= 14) && (mouseY >= 0 && mouseY <= 14) && chessBoard[mouseX][mouseY] == 0){
//第四个参数指的是透明度，255为全色，小于255可以看见图像后面的内容，等于0或大于255时效果一样，全透明
brush.setColor(QColor(0,255,0,150));
painter.setPen(Qt::NoPen);
painter.setBrush(brush);
painter.drawEllipse(QPoint(mouseX * 50 + 50, mouseY * 50 + 50), 20, 20);
}
}
void MainWindow::mouseMoveEvent(QMouseEvent *e){
//获得鼠标在哪个网格的位置
mouseX = (e->x() + 25) / 50 - 1;
mouseY = (e->y() + 25) / 50 - 1;
update();
}
仅仅是对此博主文章的复现，博主GitHub代码如下：
添加链接描述
668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
