Getting started with qpainter: drawing the chess interface

1、 design sketch

Figure 1 shows the optimized interface ; Figure 2 is pure QPainter draw ; Later, I will finish the game and release it .

2、 Realize the idea

   It was originally planned that all interfaces would use Qpainter Class is drawn , However, it was later found that the drawn interface was not as good-looking as the picture background , Therefore, the background picture chessboard method is adopted , Chess pieces are drawn using drawing classes .

2.1 UI Design

The interface design is relatively simple , It only took QWidget And a few tab buttons .

2.2 Source code

#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

#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);
    //  Enable anti aliasing ( Anti aliasing )
    painter.setRenderHint(QPainter::Antialiasing, true);

    QRect uiRect = ui->qipanwidget->geometry();
    //  Specify the picture to draw （ Replace the picture path with a valid picture path ）
    painter.drawPixmap(uiRect,QPixmap(":/images/qipan.png"));

    int nHOffSet = 66;  // The margin from the left interface 
    int nVOffSet = 66;   // Distance from the edge of the upper interface 
    int nDistance = 74;  // Spacing is 70px
    int nRadio = 36;

    // Draw a circle 
    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);  // The pixels of the chessboard picture are not accurate , therefore -10 To correct the deviation 
    painter.drawEllipse(QPoint(uiRect.left()+nHOffSet + nDistance,uiRect.top()+nVOffSet+9*nDistance-10), nRadio, nRadio);

    // Draw the Chinese characters inside the black square circle 
    {
    
        painter.setPen(QColor(0, 0, 0));
        painter.setFont(QFont(" Chinese Xingkai ", 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, " Car ", 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, " Horse ", QTextOption(Qt::AlignCenter));
    }

    // Draw the Chinese characters inside the red square circle 
    {
    
        painter.setPen(QColor(255, 0, 0));
        painter.setFont(QFont(" Chinese Xingkai ", 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, " Car ", 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, " Horse ", QTextOption(Qt::AlignCenter));
    }
}


void Widget::on_pushButton_clicked()
{
    
    close();
}