QPaintEvent 绘制控件，让你提高变成强者

2023-12-14 21:33:15

相信小伙伴们好多学习qt 的一些基本用法，不知道如何继续下去学习相关东西，大部分都是看书与对应博客，还有一些例子，然后确不知道该学习什么，这里我提供一下自己的学习习惯，也许不适合你，或许你会有更好的学习方式。

如果有比较激烈的观点，我这里只想说：您对！

声明：本文例子是刘典武开源项目，且征求对方同意：

飞扬青云大佬博客https://blog.csdn.net/feiyangqingyun

首先我是推荐飞扬青云大佬（刘典武）大佬的控件学习：

控件学习https://gitee.com/feiyangqingyun/QWidgetDemo打开后如图：

然后你把代码下载下来学习

学习方式：

比如我们拿到代码后，运行第一电池的例子：

然后学习他的代码。

比如你看到了

 Q_PROPERTY(double minValue READ getMinValue WRITE setMinValue)
    Q_PROPERTY(double maxValue READ getMaxValue WRITE setMaxValue)
    Q_PROPERTY(double value READ getValue WRITE setValue)
    Q_PROPERTY(double alarmValue READ getAlarmValue WRITE setAlarmValue)

你不是很了解Q_PROPERTY 的用法，这个时候你可以查找一些博客，然后自己写个demo

这里可以看我写的：

https://blog.csdn.net/weixin_42126427/article/details/121760108https://blog.csdn.net/weixin_42126427/article/details/121760108这样你就了解了Q_PROPERTY 的用法，然后你开始了解代码是如何画的：

    void paintEvent(QPaintEvent *);
    void drawBorder(QPainter *painter);
    void drawBg(QPainter *painter);
    void drawHead(QPainter *painter);

其主要的绘制在这个里面，画电池的头身体内部。

void Battery::drawBorder(QPainter *painter)
{
    painter->save();

    double headWidth = width() / 15;
    double batteryWidth = width() - headWidth;

    //绘制电池边框
    QPointF topLeft(borderWidth, borderWidth);
    QPointF bottomRight(batteryWidth, height() - borderWidth);
    batteryRect = QRectF(topLeft, bottomRight);

    painter->setPen(QPen(borderColorStart, borderWidth));
    painter->setBrush(Qt::NoBrush);
    painter->drawRoundedRect(batteryRect, borderRadius, borderRadius);

    painter->restore();
}

void Battery::drawBg(QPainter *painter)
{
    if (value == minValue) {
        return;
    }

    painter->save();

    QLinearGradient batteryGradient(QPointF(0, 0), QPointF(0, height()));
    if (currentValue <= alarmValue) {
        batteryGradient.setColorAt(0.0, alarmColorStart);
        batteryGradient.setColorAt(1.0, alarmColorEnd);
    } else {
        batteryGradient.setColorAt(0.0, normalColorStart);
        batteryGradient.setColorAt(1.0, normalColorEnd);
    }

    int margin = qMin(width(), height()) / 20;
    double unit = (batteryRect.width() - (margin * 2)) / 100;
    double width = currentValue * unit;
    QPointF topLeft(batteryRect.topLeft().x() + margin, batteryRect.topLeft().y() + margin);
    QPointF bottomRight(width + margin + borderWidth, batteryRect.bottomRight().y() - margin);
    QRectF rect(topLeft, bottomRight);

    painter->setPen(Qt::NoPen);
    painter->setBrush(batteryGradient);
    painter->drawRoundedRect(rect, bgRadius, bgRadius);

    painter->restore();
}

void Battery::drawHead(QPainter *painter)
{
    painter->save();

    QPointF headRectTopLeft(batteryRect.topRight().x(), height() / 3);
    QPointF headRectBottomRight(width(), height() - height() / 3);
    QRectF headRect(headRectTopLeft, headRectBottomRight);

    QLinearGradient headRectGradient(headRect.topLeft(), headRect.bottomLeft());
    headRectGradient.setColorAt(0.0, borderColorStart);
    headRectGradient.setColorAt(1.0, borderColorEnd);

    painter->setPen(Qt::NoPen);
    painter->setBrush(headRectGradient);
    painter->drawRoundedRect(headRect, headRadius, headRadius);

    painter->restore();
}

然后自己画一边后，这个时候不要以为你就学会，而是要有自己的小想法，比如我会加个小闪电，自己绘制了闪电，然后我添加让控件转起来的功能：

效果：

录屏有点小问题。

代码改：

void Battery::drawLighting(QPainter *painter)
{
    painter->save();

    QPointF points[6] ={
        QPointF(batteryRect.width()/2+5,height() / 8),
        QPointF(batteryRect.width()/2,height() / 2-20),
        QPointF(batteryRect.width()/2+30,height() / 2-20),
        QPointF(batteryRect.width()/2-5,height() - height() / 8),
        QPointF(batteryRect.width()/2,height() / 2+20),
        QPointF(batteryRect.width()/2-30,height() / 2+20),
    };
    painter->setPen(QPen(borderColorStart, borderWidth));
    if(currentValue <= alarmValue)
    {
         painter->setBrush(QBrush(QColor(250, 118, 113),Qt::SolidPattern));
    }
    else {
        painter->setBrush(QBrush(QColor(50, 205, 51),Qt::SolidPattern));
    }

    painter->drawPolygon(points,6);
    painter->restore();
}

旋转代码：

    pg = new QGraphicsView(this);
    QGraphicsScene *sence = new QGraphicsScene();
    ui->battery->setParent(nullptr);
    sence->addWidget(ui->battery);

    pg->setAttribute(Qt::WA_TranslucentBackground,true);
    pg->setGeometry(0,0,520,520);
    pg->setScene(sence);
    pg->translate(ui->battery->width()/2,ui->battery->height()/2);
    pg->setStyleSheet("background: transparent;padding:0px;border:0px");
    pg->rotate(0);
    pg->setAutoFillBackground(true);
    ui->verticalSlider->setMinimum(0);
    ui->verticalSlider->setMaximum(360);
    ui->verticalSlider->setValue(0);
    connect(ui->verticalSlider,&QSlider::valueChanged,[=](int a){
         pg->rotate(a);
    });

这样你会对这个电池的绘画有一定了解，然后学以致用。喜欢我博客可以关注我，让我们共同进步，希望我的文章能够对你有一定的帮助。

码农公寓

相关文章