How Qt realizes the highlight button control

1 Introduction

This highlighted button control is not my original work. It is the work of Gongsun Ergou, a master figure in the Qt world. If you are interested, you can search and check it. On the original author's code, I just changed the framework of my own control Structure, and then improved some details, such as adding various color settings, providing direct switching of colors to simulate traffic lights, etc.

In fact, the entire programming learning process is a process of continuous learning and reference. Constantly refer to other people's codes, refer to the codes of demos, refer to help documents, search-oriented programming, etc. When encountering problems, try to solve them by yourself first, and think about how to improve them. A good way is to suggest that in the process of learning programming, it is very important to read more help documents, which basically cover the descriptions of all functions, at least the basic descriptions are available, and then refer to the demo that comes with it. After a few years of doing this, the level of accuracy is guaranteed. Cengceng up.

Highlight button control function:

1. Text can be set, centered
2. Text color can be set
3. The gradient color of the outer border can be set
4. The inner border gradient color can be set
5. Can set the background color
6. Can directly call the built-in public slot functions such as setting green/red/yellow/black/blue
7. It can be set whether it is movable in the container and used as an object
8. You can set whether to display the rectangle
9. Alarm color + non-alarm color can be set
10. Can control start alarm and stop alarm, flashing when alarm

2. Code ideas

//绘制外边框
void LightButton::drawBorderOut(QPainter *painter)
{
    int radius = 99;
    painter->save();
    painter->setPen(Qt::NoPen);
    QLinearGradient borderGradient(0, -radius, 0, radius);
    borderGradient.setColorAt(0, borderOutColorStart);
    borderGradient.setColorAt(1, borderOutColorEnd);
    painter->setBrush(borderGradient);
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
    painter->restore();
}
//绘制内边框
void LightButton::drawBorderIn(QPainter *painter)
{
    int radius = 90;
    painter->save();
    painter->setPen(Qt::NoPen);
    QLinearGradient borderGradient(0, -radius, 0, radius);
    borderGradient.setColorAt(0, borderInColorStart);
    borderGradient.setColorAt(1, borderInColorEnd);
    painter->setBrush(borderGradient);
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
    painter->restore();
}
//绘制主背景
void LightButton::drawBg(QPainter *painter)
{
    int radius = 80;
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(bgColor);
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
    painter->restore();
}
//绘制文字
void LightButton::drawText(QPainter *painter)
{
    if (text.isEmpty()) {
        return;
    }

    int radius = 100;
    painter->save();

    QFont font;
    font.setPixelSize(85);
    painter->setFont(font);
    painter->setPen(textColor);
    QRect rect(-radius, -radius, radius * 2, radius * 2);
    painter->drawText(rect, Qt::AlignCenter, text);
    painter->restore();
}
//绘制遮罩层
void LightButton::drawOverlay(QPainter *painter)
{
    if (!showOverlay) {
        return;
    }

    int radius = 80;
    painter->save();
    painter->setPen(Qt::NoPen);

    QPainterPath smallCircle;
    QPainterPath bigCircle;
    radius -= 1;
    smallCircle.addEllipse(-radius, -radius, radius * 2, radius * 2);
    radius *= 2;
    bigCircle.addEllipse(-radius, -radius + 140, radius * 2, radius * 2);

    //高光的形状为小圆扣掉大圆的部分
    QPainterPath highlight = smallCircle - bigCircle;

    QLinearGradient linearGradient(0, -radius / 2, 0, 0);
    overlayColor.setAlpha(100);
    linearGradient.setColorAt(0.0, overlayColor);
    overlayColor.setAlpha(30);
    linearGradient.setColorAt(1.0, overlayColor);
    painter->setBrush(linearGradient);
    painter->rotate(-20);
    painter->drawPath(highlight);

    painter->restore();
}

3. Rendering

 The benefits of this article, free to receive Qt development learning materials package, technical video, including (C++ language foundation, C++ design pattern, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project actual combat, QSS, OpenCV, Quick module, interview questions, etc.) ↓↓↓↓↓↓See below↓↓Click on the bottom of the article to receive the fee↓↓