首页 > 其他分享> 文章详细

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

2021-12-15 12:05:23 阅读：196 来源： 互联网

标签：控件强者 height width batteryRect QPaintEvent QPointF painter pg

相信小伙伴们好多学习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);
    });

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

标签：控件,强者,height,width,batteryRect,QPaintEvent,QPointF,painter,pg
来源： https://blog.csdn.net/weixin_42126427/article/details/121947495

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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