qt Qt如何实现绘制网格背景

参考 https://blog.csdn.net/m0_73443478/article/details/130170814

大的方向即时重写 paintEvent 函数

现有功能(网格)
使用滚轮缩放。
缩放到达一定阈值后恢复网格大小。
窗口大小调整时网格背景也自动调整重绘。

mainwindow.h

点击查看代码

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QWidget>
#include <QPen>
#include <QPainter>
#include <QPaintEvent>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
protected:
    void paintEvent(QPaintEvent *event);
    void wheelEvent(QWheelEvent *event);
    void resizeEvent(QResizeEvent *event);

private:
    void setBackgroundColor();              // 设置窗口背景颜色
    void drawRowLines(QPainter *painter);   // 绘制横线
    void drawColLines(QPainter *painter);   // 绘制竖线

private:
    Ui::MainWindow *ui;

    int minGap;                              // 最小线间隔
    int maxGap;                              // 最大线间隔
    float gap;                               // 当前线间隔
    float startX;                            // 竖线初始x坐标（从窗口中间开始）
    float startY;                            // 横线初始y坐标（从窗口中间开始）
    QPen lightPen;                           // 细一点的画笔
    QPen darkPen;                            // 粗一点的画笔
};

#endif // MAINWINDOW_H

mainwindow.cpp

点击查看代码

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    this->minGap = 4;
    this->maxGap = 14;
    this->gap = (this->minGap + this->maxGap) / 2;
    this->startX = this->width() / 2;
    this->startY = this->height() / 2;
    this->lightPen = QPen(QColor(222, 222, 222));
    this->darkPen = QPen(QColor(222, 222, 222));
    this->darkPen.setWidth(2);

    this->setBackgroundColor();

}

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



void MainWindow::setBackgroundColor() {
    QPalette palette;
    palette.setColor(QPalette::Background, QColor(250, 250, 250));
    this->setPalette(palette);
    this->setAutoFillBackground(true);
}

void MainWindow::drawRowLines(QPainter *painter) {
    int lineCount = 0;
    float biggerY = this->startY;
    float smallerY = this->startY;

    painter->setPen(this->darkPen);

    while (true) {
        painter->drawLine(QPointF(0.0, biggerY), QPointF(this->width(), biggerY));
        painter->drawLine(QPointF(0.0, smallerY), QPointF(this->width(), smallerY));

        biggerY += this->gap;
        smallerY -= this->gap;
        if (smallerY <= 0 || biggerY >= this->height()) {
            break;
        }

        // 每间隔一定数量的线，就画一条粗一点的横线
        lineCount += 1;
        if (lineCount == 10) {
            painter->setPen(this->darkPen);
            lineCount = 0;
        }
        else {
            painter->setPen(this->lightPen);
        }
    }

}

void MainWindow::drawColLines(QPainter *painter) {
    int lineCount = 0;
    float biggerX = this->startX;
    float smallerX = this->startX;

    painter->setPen(this->darkPen);

    while (true) {
        painter->drawLine(QPointF(biggerX, 0.0), QPointF(biggerX, this->height()));
        painter->drawLine(QPointF(smallerX, 0.0), QPointF(smallerX, this->height()));

        biggerX += this->gap;
        smallerX -= this->gap;
        if (smallerX <= 0 || biggerX >= this->width()) {
            break;
        }

        // 每间隔一定数量的线，就画一条粗一点的竖线
        lineCount += 1;
        if (lineCount == 10) {
            painter->setPen(this->darkPen);
            lineCount = 0;
        }
        else {
            painter->setPen(this->lightPen);
        }
    }

}

void MainWindow::paintEvent(QPaintEvent *event) {

    QWidget::paintEvent(event);
    QPainter painter(this);
    this->drawRowLines(&painter);
    this->drawColLines(&painter);
}

void MainWindow::wheelEvent(QWheelEvent *event) {
    QWidget::wheelEvent(event);
    if (event->angleDelta().y() > 0) {
        this->gap += 0.1;
    }
    else if (event->angleDelta().y() < 0) {
        this->gap -= 0.1;
    }

    if (this->gap >= this->maxGap) {
        this->gap = this->minGap;
    }
    else if (this->gap <= this->minGap) {
        this->gap = this->maxGap;
    }

    this->update();
}

void MainWindow::resizeEvent(QResizeEvent *event) {
    QWidget::resizeEvent(event);
    this->startX = this->width() / 2;
    this->startY = this->height() / 2;
    this->update();
}

点
mainwindow.h

点击查看代码

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>


#include <QWidget>
#include <QPainter>
#include <QPen>

class DotBackgroundWidget : public QWidget {
public:
    DotBackgroundWidget(QWidget *parent = nullptr) : QWidget(parent) {}

protected:
    void paintEvent(QPaintEvent *event) override {
        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing);

        QColor dotColor(200, 200, 200);
        painter.setPen(QPen(dotColor, 5));  // 设置点的直径和颜色

        int width = this->width();
        int height = this->height();
        int dotSpacing = 20;  // 点之间的间距

        for (int x = 0; x < width; x += dotSpacing) {
            for (int y = 0; y < height; y += dotSpacing) {
                painter.drawPoint(x, y);
            }
        }
    }
};



namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

mainwindow.cpp

点击查看代码

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    ui->widget_history->widget()->deleteLater();
    // 创建自定义内容部件（例如点背景）
    DotBackgroundWidget *dotWidget = new DotBackgroundWidget();
    // 或者使用网格背景
    // GridBackgroundWidget *gridWidget = new GridBackgroundWidget();
    // scrollArea->setWidget(gridWidget);

    // 设置自定义内容部件为 QScrollArea 的小部件
    ui->widget_history->setWidget(dotWidget);

}

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

或者直接贴图
即重写 paintEvent 函数

bgPix = QPixmap(":/img/bg.png");//ui上的背景图
        //isenablebg=true;// 绘制背景开关


    void paintEvent(QPaintEvent *){//绘制颜色交替背景
        if(!isenablebg){return;}
        QPainter painter(this); painter.drawTiledPixmap(rect(), bgPix);//绘制平铺图像
    }