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

一、图片及棋盘分析

1:在上文中已经对单张图片的显示进行了测试，从中可以知道一张图片需要一个QPixmap对象对其进行加载。棋盘图片共有23张，也就需要23个QPixmap的对象。同时要求对象名与图片名一致，避免对象过多造成混乱。图片的命名是根据该图片在整个棋盘中的位置对其进行命名。例如下图是棋盘的左下角，故此命名为“leftDown”；其中又有一些特殊位置，比如炮，兵的位置，该位置存在特殊标记，故其图片命名为“SIGN”

2:棋盘由十条横线和九条竖线组成(中间的竖线是不相连的，但在同一直线上，上下看作一条线)，共九十个交点，使用一个十行九列的int类型数组chessmap[10][9]与之对应。因为10，9就是常量，直接新建一个.h文件，在里面使用define定义即可(后面使用的常量也在此定义)。要使用这些常量，直接包含头文件就可使用。
3:数组chessmap是int类型，棋盘图片共有23张，分别表示棋盘上的不同位置。就用0-22在chessmap中来表示这些图片。例如chessmap[i][j]=0；那(i，j)位置上就放置0所代表的图片。0-22这些常量使用枚举的方式定义。

enum
{in, up, down, mleft, mright, mark,//0地图中心块  1上、2下、3左、4右、5炮标记up_right, up_left, down_right, down_left,//6右上角、7左上角、8右下角、9左下角s, suru, sulu, sdru, sdlu, inu, ind,//10士活动区、11上右、12上左、13下右、14下左、15上河岸、16下河岸surd, suld, sdrd, sdld,//士活动区外墙特殊17、18、19、20sign_right, sign_left,//21、22  兵卒边缘标记
};

4:先定义23个QPixmap类型的变量来表示图片(在mywidget.h中定义)，下面就需要考虑如何将23张图片与这些常量关联起来。图片是QPixmap类型，常量是int型。使用关联容器QHash<int ,QPixmap>来将图片和常量关联起来，形成一一影射。
QPixmap变量

    //mapQPixmap sign;//炮兵标记QPixmap lSign;//左兵/卒标记QPixmap rSign;// 右兵/卒标记QPixmap upRiverBank;//上河岸QPixmap downRiverBank;//下河岸QPixmap upEdge;//上边缘QPixmap downEdge;//下边缘QPixmap leftEdge;//左边缘QPixmap rightEdge;//右边缘QPixmap cross;//十字格QPixmap mi;//米字格QPixmap leftUp;//左上角QPixmap rightUp;//右上角QPixmap leftDown;//左下角QPixmap rightDown;//右下角QPixmap upjglu;//上九宫左上QPixmap upjgru;//上九宫右上QPixmap upjgld;//上九宫左下QPixmap upjgrd;//上九宫右下QPixmap downjglu;//下九宫左上QPixmap downjgru;//下九宫右上QPixmap downjgld;//下九宫左下QPixmap downjgrd;//下九宫右下

棋盘图片值映射对组在mywidget.h中定义，再定义一个对应的函数，在其中完成键值一一对应的操作

QHash<int, QPixmap> chessboardPairs;
void valueMappingPic();//键映射图片

valueMappingPic函数(注:这里键值的映射不可出错)

//键映射图片
void myWidget::valueMappingPic()
{//棋盘值映射图片chessboardPairs.insert(in,cross);chessboardPairs.insert(up,upEdge);chessboardPairs.insert(down,downEdge);chessboardPairs.insert(mleft,leftEdge);chessboardPairs.insert(mright,rightEdge);chessboardPairs.insert(up_left,leftUp);chessboardPairs.insert(up_right,rightUp);chessboardPairs.insert(down_left,leftDown);chessboardPairs.insert(down_right,rightDown);chessboardPairs.insert(mark,sign);chessboardPairs.insert(sign_left,lSign);chessboardPairs.insert(sign_right,rSign);chessboardPairs.insert(inu,upRiverBank);chessboardPairs.insert(ind,downRiverBank);chessboardPairs.insert(s,mi);chessboardPairs.insert(sdru,downjgru);chessboardPairs.insert(sdlu,downjglu);chessboardPairs.insert(sdld,downjgld);chessboardPairs.insert(sdrd,downjgrd);chessboardPairs.insert(surd,upjgrd);chessboardPairs.insert(suld,upjgld);chessboardPairs.insert(suru,upjgru);chessboardPairs.insert(sulu,upjglu);
}

二、棋盘的实现

1:棋盘的实现要先对图片进行加载，定义一个函数来完成棋盘图片加载工作。

void pictureload();//图片加载//图片加载
void myWidget::pictureload()
{//棋盘图片加载sign.load("map/SIGN.gif");//炮、兵、卒标记lSign.load("map/LEFTSIGN.gif");//左兵、卒标记rSign.load("map/RightSIGN.gif");//右兵、卒标记upRiverBank.load("map/upRiverBank.gif");//上河岸downRiverBank.load("map/downRiverBank.gif");//下河岸upEdge.load("map/upEdge.gif");//上边缘downEdge.load("map/downEdge.gif");//下边缘leftEdge.load("map/leftEdge.gif");//左边缘rightEdge.load("map/rightEdge.gif");//右边缘cross.load("map/Sizige.gif");//十字格mi.load("map/X.gif");//米字格leftUp.load("map/leftUp.gif");//左上角rightUp.load("map/rightUp.gif");//右上角leftDown.load("map/leftDown.gif");//左下角rightDown.load("map/rightDown.gif");//右下角upjglu.load("map/X_up_leftUp.gif");//上九宫左上upjgru.load("map/X_up_rightUp.gif");//上九宫右上upjgld.load("map/X_up_leftDown.gif");//上九宫左下upjgrd.load("map/X_up_rightDown.gif");//上九宫右下downjglu.load("map/X_down_leftUp.gif");//下九宫左上downjgru.load("map/X_down_rightUp.gif");//下九宫右上downjgld.load("map/X_down_leftDown.gif");//下九宫左下downjgrd.load("map/X_down_rightDown.gif");//下九宫右下}

2:下面就可以为chessmap数组进行赋值

myWidget::mapInit()void myWidget::mapInit()
{//棋盘棋子数组值初始恢复(全为0)for(int j=0;j<col;j++){for(int i=0;i<row;i++)chessmap[i][j]=0;//十字格(下面chessmap赋值完成后，剩余的地方全是十字格图片)}//四角chessmap[0][0]=up_left;chessmap[0][8]=up_right;chessmap[9][0]=down_left;chessmap[9][8]=down_right;for(int i=1;i<col-1;i++){chessmap[0][i]=up;//上边缘chessmap[9][i]=down;//下边缘chessmap[4][i]=inu;//上河岸chessmap[5][i]=ind;//下河岸}for(int i=1;i<row-1;i++){chessmap[i][0]=mleft;//左边缘chessmap[i][8]=mright;//右边缘}//中间兵卒标记点for(int i=2;i<col-1;i=i+2){chessmap[3][i]=mark;chessmap[6][i]=mark;}//边缘兵卒标记点chessmap[3][0]=sign_left;chessmap[6][0]=sign_left;//左标记chessmap[3][8]=sign_right;chessmap[6][8]=sign_right;//右标记//炮标记点chessmap[2][1]=mark;chessmap[2][7]=mark;chessmap[7][1]=mark;chessmap[7][7]=mark;//九宫格chessmap[7][3] = sdlu;//下方士活动区左上chessmap[0][3] = sulu;//上方士活动区左上chessmap[0][5] = suru;//下方士活动区右上chessmap[7][5] = sdru;//上方士活动区左上chessmap[1][4] = chessmap[8][4] = s;//米字格chessmap[2][3] = suld;//上方士活动区左下chessmap[9][3] = sdld;//下方士活动区左下chessmap[2][5] = surd;//上方士活动区右下chessmap[9][5] = sdrd;//下方士活动区右下
}

3:现在棋盘绘制的准备工作全部完成啦，接下来进行实现。要完成图片绘制，图片的加载和常量与图片的键值对的映射是要首先完成的，因此将pictureload函数与valueMappingPic函数放在myWidge的构造函数中。

myWidget::myWidget(QWidget *parent) : QWidget(parent)
{pictureload();//棋盘棋子图片加载valueMappingPic();//值映射图片的映射
}

4：接下来就是paintEvent函数中的操作

void myWidget::paintEvent(QPaintEvent *event)
{mapInit();QPainter painter(this);int h=this->height()/row;//单张图片的高度(对应y轴)int w=this->width()/col;//单张图片的宽度(对应x轴)drawChessboard(painter,w,h);//画棋盘
}

运行效果图

到这里我们的棋盘绘制就完成了，若有不清楚的地方欢迎各位留言谈论。

Qt实现中国象棋
(四)棋子绘制的实现