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

一、棋子图片的简要介绍

上图就是所要使用到的棋子图片，以“r”开头命名的均为红棋，以“b”开头命名的是黑棋；其中带有红色边框的棋子表示将要被移动的棋子(被选中的效果图片)。同样将这些棋子图片放入之前运行后生成的文件夹之中。

二、棋子绘制实现
1:有了之前棋盘绘制的经验，棋子的绘制就简单多啦。首先定义QPixmap变量

    //qizi//(红棋)
    QPixmap rBing;
    QPixmap rPao;
    QPixmap rJu;
    QPixmap rMa;
    QPixmap rXiang;
    QPixmap rShi;
    QPixmap rShuai;

    //qiziEffect(红棋点击效果图)
    QPixmap rBing2;
    QPixmap rPao2;
    QPixmap rJu2;
    QPixmap rMa2;
    QPixmap rXiang2;
    QPixmap rShi2;
    QPixmap rShuai2;

    //qizi(黑棋)
    QPixmap bZu;
    QPixmap bPao;
    QPixmap bJu;
    QPixmap bMa;
    QPixmap bXiang;
    QPixmap bShi;
    QPixmap bJiang;

    //qiziEffect(黑棋点击效果图)
    QPixmap bZu2;
    QPixmap bPao2;
    QPixmap bJu2;
    QPixmap bMa2;
    QPixmap bXiang2;
    QPixmap bShi2;
    QPixmap bJiang2;

2:使用数字来在chessmap数组中表示这些棋子，在之前枚举后面接上所要代表棋子的值即可。

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、20
    sign_right, sign_left,//21、22  边缘标记
    bing = 31, Rpao, Rju, Rma, Rxiang, Rshi, Rshuai,//红棋
    zhu = 41, Bpao, Bju, Bma, Bxiang, Bshi, Bjiang,//黑棋
    bing2 = 51, Rpao2, Rju2, Rma2, Rxiang2, Rshi2, Rshuai2,//红棋效果图
    zhu2 = 61, Bpao2, Bju2, Bma2, Bxiang2, Bshi2, Bjiang2,//黑棋效果图
};

3:值与棋子图片的映射，先定义一个棋子值图片映射对组QHash<int, QPixmap> chessmanPairs;再在void myWidget::valueMappingPic()函数中写入以下代码。

 //棋子值映射图片
    chessmanPairs.insert(bing,rBing);
    chessmanPairs.insert(Rpao,rPao);
    chessmanPairs.insert(Rju,rJu);
    chessmanPairs.insert(Rma,rMa);
    chessmanPairs.insert(Rxiang,rXiang);
    chessmanPairs.insert(Rshi,rShi);
    chessmanPairs.insert(Rshuai,rShuai);
    chessmanPairs.insert(zhu,bZu);
    chessmanPairs.insert(Bpao,bPao);
    chessmanPairs.insert(Bju,bJu);
    chessmanPairs.insert(Bma,bMa);
    chessmanPairs.insert(Bxiang,bXiang);
    chessmanPairs.insert(Bshi,bShi);
    chessmanPairs.insert(Bjiang,bJiang);

    chessmanPairs.insert(bing2,rBing2);
    chessmanPairs.insert(Rpao2,rPao2);
    chessmanPairs.insert(Rju2,rJu2);
    chessmanPairs.insert(Rma2,rMa2);
    chessmanPairs.insert(Rxiang2,rXiang2);
    chessmanPairs.insert(Rshi2,rShi2);
    chessmanPairs.insert(Rshuai2,rShuai2);
    chessmanPairs.insert(zhu2,bZu2);
    chessmanPairs.insert(Bpao2,bPao2);
    chessmanPairs.insert(Bju2,bJu2);
    chessmanPairs.insert(Bma2,bMa2);
    chessmanPairs.insert(Bxiang2,bXiang2);
    chessmanPairs.insert(Bshi2,bShi2);
    chessmanPairs.insert(Bjiang2,bJiang2);

4:棋子图片的加载，在之前定义的void myWidget::pictureload()函数中加入棋子图片加载代码即可。

//棋子图片加载
    rBing.load("qi/rBing.gif");
    rPao.load("qi/rPao.gif");
    rJu.load("qi/rJu.gif");
    rMa.load("qi/rMa.gif");
    rXiang.load("qi/rXiang.gif");
    rShi.load("qi/rShi.gif");
    rShuai.load("qi/rShuai.gif");

    rBing2.load("qi/rBing2.gif");
    rPao2.load("qi/rPao2.gif");
    rJu2.load("qi/rJu2.gif");
    rMa2.load("qi/rMa2.gif");
    rXiang2.load("qi/rXiang2.gif");
    rShi2.load("qi/rShi2.gif");
    rShuai2.load("qi/rShuai2.gif");

    bZu.load("qi/bZu.gif");
    bPao.load("qi/bPao.gif");
    bJu.load("qi/bJu.gif");
    bMa.load("qi/bMa.gif");
    bXiang.load("qi/bXiang.gif");
    bShi.load("qi/bShi.gif");
    bJiang.load("qi/bJiang.gif");

    bZu2.load("qi/bZu2.gif");
    bPao2.load("qi/bPao2.gif");
    bJu2.load("qi/bJu2.gif");
    bMa2.load("qi/bMa2.gif");
    bXiang2.load("qi/bXiang2.gif");
    bShi2.load("qi/bShi2.gif");
    bJiang2.load("qi/bJiang2.gif");

5:准备开局时棋子在chessmap中的赋值(注：下面的ChessPiecesInit()函数必须在图片初始函数之后使用，因为是要先呈现棋盘图片，再呈现棋子图片。不然棋子图片会被棋盘图片所覆盖)

void ChessPiecesInit();

//棋子图片标记
void myWidget::ChessPiecesInit()
{
    //炮兵标记格
    chessmap[3][2] = chessmap[3][4] = chessmap[3][6] = zhu;
    chessmap[3][0] = chessmap[3][8] = zhu;
    chessmap[2][7] = chessmap[2][1] = Bpao;
    chessmap[6][2] = chessmap[6][4] = chessmap[6][6] = bing;
    chessmap[6][0] = chessmap[6][8] = bing;
    chessmap[7][7] = chessmap[7][1] = Rpao;

    //其它棋子
    chessmap[0][0] = chessmap[0][8] = Bju; chessmap[0][1] = chessmap[0][7] = Bma; chessmap[0][2] = chessmap[0][6] = Bxiang; chessmap[0][3] = chessmap[0][5] = Bshi; chessmap[0][4] = Bjiang;
    chessmap[9][0] = chessmap[9][8] = Rju; chessmap[9][1] = chessmap[9][7] = Rma; chessmap[9][2] = chessmap[9][6] = Rxiang; chessmap[9][3] = chessmap[9][5] = Rshi; chessmap[9][4] = Rshuai;
}

6:棋子绘制函数

//绘制棋子
void myWidget::drawChessPieces(QPainter &painter, int w, int h)
{
    for(int i=0;i<row;i++)
    {
        for(int j=0;j<col;j++)
        {
            painter.drawPixmap(j*w,i*h,w,h,chessmanPairs[chessmap[i][j]]);
        }
    }
}

7:最终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);//绘制棋盘
    ChessPiecesInit();//棋子初始化
    drawChessPieces(painter,w,h);//绘制棋子
}

8:在这里我们的棋子已经绘制完成。来看一下运行后效果展示

当前项目链接：https://pan.baidu.com/s/1sRitrw5b0hbA6UVZ35g5Qg
提取码：11tr

Qt实现中国象棋
(五)棋子移动测试