QT五子棋项目详解之一:界面绘制

首页展示:

QT五子棋项目详解之一:界面绘制


第1步设置首页:新建项目,选择mainwindow基类,在UI界面,选择按钮和lable标签。给label设置背景图片哥的妹子。为按钮设置槽。

QT五子棋项目详解之一:界面绘制


第2步:新建qt界面师设计类gamewindow,点击人人对战或人机对战就会转到gamewindow界面。

QT五子棋项目详解之一:界面绘制

QT五子棋项目详解之一:界面绘制

第3步:绘制棋盘

棋盘绘制效果图:

QT五子棋项目详解之一:界面绘制

3.1设置界面大小和背景,setmouseTracking为接受鼠标移动

QT五子棋项目详解之一:界面绘制

3.2 绘制棋盘边界边框,棋盘内颜色

QT五子棋项目详解之一:界面绘制

3.3绘制棋盘

QT五子棋项目详解之一:界面绘制

3.4绘制棋盘中间的5个小黑点

QT五子棋项目详解之一:界面绘制

3.5上面几部绘制完毕我们还要考虑画棋子。

我们用数组chess[15][15]来表示棋盘,棋盘中4代表黑子,5代表白字。

注意一下qt中奇怪的坐标体系。

QT五子棋项目详解之一:界面绘制

3.6 随着鼠标的移动绘制红框    

QT五子棋项目详解之一:界面绘制


鼠标移动事件,movex,movey代表当前坐标,全部变量

QT五子棋项目详解之一:界面绘制

绘制红色方框

QT五子棋项目详解之一:界面绘制

3.7红色十字

QT五子棋项目详解之一:界面绘制

currentx,currenty记录最后一个落子的坐标

QT五子棋项目详解之一:界面绘制


总结:QT五子棋界面绘制,掌握画笔画刷调节颜色宽度,绘制形状,其次必须精通坐标体系。