QPainter的使用入门：绘制象棋界面

1、效果图

图一是优化后的界面；图二是纯QPainter绘制；后续会把这个游戏做完放出来。

2、实现思路

  原本计划所有的界面都用Qpainter类绘制出来，但后续发现绘制出来的界面没有图片背景好看，因此采用了背景图片棋盘方式，棋子使用绘制类进行绘制。

2.1 UI设计

界面设计较为简单，只用了QWidget和几个标签按钮。

2.2 源码

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;

    // QWidget interface
protected:
    virtual void paintEvent(QPaintEvent *event);
private slots:
    void on_pushButton_clicked();
};
#endif // WIDGET_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>

#pragma execution_character_set("utf-8")

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setWindowFlags(Qt::FramelessWindowHint);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    // 启用抗锯齿(反走样)
    painter.setRenderHint(QPainter::Antialiasing, true);

    QRect uiRect = ui->qipanwidget->geometry();
    // 指定要绘制的图片（将图片路径替换为有效的图片路径）
    painter.drawPixmap(uiRect,QPixmap(":/images/qipan.png"));

    int nHOffSet = 66;  //距离左界面的边距
    int nVOffSet = 66;   //距离上界面的边距
    int nDistance = 74;  //间距为70px
    int nRadio = 36;

    //绘画圆形
    QBrush brush(QColor(211,130,44));
    painter.setBrush(brush);
    painter.drawEllipse(QPoint(uiRect.left()+nHOffSet,uiRect.top()+nVOffSet), nRadio, nRadio);
    painter.drawEllipse(QPoint(uiRect.left()+nHOffSet + nDistance,uiRect.top()+nVOffSet), nRadio, nRadio);

    painter.setBrush(brush);
    painter.drawEllipse(QPoint(uiRect.left()+nHOffSet,uiRect.top()+nVOffSet+9*nDistance-10), nRadio, nRadio);  //棋盘图片像素不准确，因此-10来纠偏
    painter.drawEllipse(QPoint(uiRect.left()+nHOffSet + nDistance,uiRect.top()+nVOffSet+9*nDistance-10), nRadio, nRadio);

    //绘画黑色方圆形里面的汉字
    {
        painter.setPen(QColor(0, 0, 0));
        painter.setFont(QFont("华文行楷", nRadio-3, 700));

        QRect textRec;
        textRec.setTopLeft(QPoint(uiRect.left()+nHOffSet-nRadio,uiRect.top()+nVOffSet-nRadio));
        textRec.setBottomRight(QPoint(uiRect.left()+nHOffSet+nRadio,uiRect.top()+nVOffSet+nRadio));
        painter.drawText(textRec, "車", QTextOption(Qt::AlignCenter));


        textRec.setTopLeft(QPoint(uiRect.left()+nHOffSet-nRadio+ nDistance,uiRect.top()+nVOffSet-nRadio));
        textRec.setBottomRight(QPoint(uiRect.left()+nHOffSet+nRadio+ nDistance,uiRect.top()+nVOffSet+nRadio));
        painter.drawText(textRec, "馬", QTextOption(Qt::AlignCenter));
    }

    //绘画红色方圆形里面的汉字
    {
        painter.setPen(QColor(255, 0, 0));
        painter.setFont(QFont("华文行楷", nRadio-3, 700));
        QRect textRec;
        textRec.setTopLeft(QPoint(uiRect.left()+nHOffSet-nRadio,uiRect.top()+nVOffSet-nRadio+9*nDistance-10));
        textRec.setBottomRight(QPoint(uiRect.left()+nHOffSet+nRadio,uiRect.top()+nVOffSet+nRadio+9*nDistance-10));
        painter.drawText(textRec, "車", QTextOption(Qt::AlignCenter));

        textRec.setTopLeft(QPoint(uiRect.left()+nHOffSet-nRadio+ nDistance,uiRect.top()+nVOffSet-nRadio+9*nDistance-10));
        textRec.setBottomRight(QPoint(uiRect.left()+nHOffSet+nRadio+ nDistance,uiRect.top()+nVOffSet+nRadio+9*nDistance-10));
        painter.drawText(textRec, "馬", QTextOption(Qt::AlignCenter));
    }
}


void Widget::on_pushButton_clicked()
{
    close();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80