Qt实现中国象棋:(二)棋盘绘制的详细分析及测试

一、棋盘绘制分析

这里事先说明我使用的是一些图片，而并非是通过画线函数来绘制棋盘，对于棋盘的绘制就是简单的图片位置的放置操作。象棋棋盘是十条横线、九条竖线，一共九十个交点，这些交点也是棋子的落子位置，同时也是图片的中心位置，棋盘就是由九十张图片拼接而成。这里设置每张图片的大小为5050，棋盘的大小就是为450500，这就是widget控件minimunSize属性中宽度设置为450，高度设置为500的原因(同时设置控件大小随主窗体的大小变化而变化)。所有对棋子、棋盘的操作都是在名为widget的控件中完成的。(棋子棋盘图片素材资源在文章最下方，有需要的请自行获取)

以下是所需使用的棋盘图片(图片命名不可含有中文)，以这23张图片拼成棋盘。

二、图片显示测试

先来实现一张图片在界面中的显示，用来观察图片显示需要注意哪些问题。
1：先将建立的项目运行一次，运行成功后会产生一个文件夹，该文件夹与项目文件夹在同一路径下。将图片文件夹放置到新产生的文件夹中。

上图就是项目运行后产生的新文件夹，将图片文件放入该文件夹中(下图的map文件夹就是新放入的棋盘图片文件夹)。

2:因为需要图片最终在以myWidget为基类的windget窗体上面显示，所以操作均在mywidget.cpp中完成。要完成制图就需要使用paintEvent函数，下面先来看一下Qt文档中对于paintEvent函数的一段描述

意思就是说当绘制事件发生，更新区通常会被擦除，因此是在部件背景上进行绘制(这也是我之前所犯的一个错误，这里在此记录一下)。不能弄错绘图的背景。
需要使用到QPainter，所以需要添加头文件；QPainter中有drawImage和drawPixmap以及drawPicture可用于绘制图片，这里我们选用drawPixmap。在qt中drawPixmap的构造函数有多个重载，只选取其中一个使用。以下就是我使用的构造函数。

参数介绍：pixmap就是所要绘制的图片，(x,y)就是图片相对于当前窗口的坐标，width和height为图片的宽度和高度。
这里简要说明一下qt中的坐标系统：每一个窗体都有自己的坐标原点，就是窗体的左上角，坐标为(0,0)；横向为x轴，x向右递增；纵向为y轴，y向下递增。
使用QPixmap::load函数来进行图片加载，因为之前已经将图片文件夹放入运行后产生的文件夹中，所以该函数中参数只需填入图片的相对路径即可。
3：了解了以上的知识就可以进行图片的绘制了。选取名为“downEdge”的图片来进行测试，
通过重写paintEvent函数来实现绘制
paintEvent函数的定义在myWidge.h文件中

void paintEvent(QPaintEvent *event) override;

函数的实现

void myWidget::paintEvent(QPaintEvent *event)
{
    QPixmap t;
    t.load("map/downEdge.gif");
    QPainter painter(this);
    painter.drawPixmap(0,0,50,50,t);
}

测试效果如下图(图片的起点坐标为(0,0)，图片宽度和高度均为50)

图片素材链接：https://pan.baidu.com/s/1-BhbzBPKVte3yeEG8NrCAg
提取码：33rt

Qt实现中国象棋
(三)棋盘绘制的详细分析及实现