Qt custom control circular button, circular avatar

Preface

Nowadays, the avatars or buttons of many software are round, which looks more comfortable. For example, the QQ login avatar and some buttons on the Kugou client are round. There are roughly several ideas for implementing circular avatars in Qt. The first is the image masking method, and the other method is to use a style sheet to set border-radius to achieve a circular border. What I want to introduce here is to use Qt’s painting master QPainter to achieve it.

Code

#include "roundbutton.h"
#include "ui_roundbutton.h"
#include <QPainter>

#ifndef NO_TOUCH_EVENT

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

    m_radius = 200;
    isPressed = false;
    setIcon(":/ppd.jpeg");

#ifdef NO_TOUCH_EVENT
    connect(this,&RoundButton::btnClicked,[=]
    {
    
    
        qDebug("Round button clicked.");
        setIcon(":/timo.jpg");
    });
#endif
}

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

void RoundButton::setIcon(const QString &fileName)
{
    
    
     if(pixmap.load(fileName))
     {
    
    
         qDebug("load icon ok.");
         update();
     }
}

void RoundButton::setRadius(int radius)
{
    
    
    m_radius = radius;
}

#ifdef NO_TOUCH_EVENT
void RoundButton::mousePressEvent(QMouseEvent *event)
{
    
    
    Q_UNUSED(event)

    isPressed = true;
}

void RoundButton::mouseMoveEvent(QMouseEvent *event)
{
    
    
    Q_UNUSED(event)

}

void RoundButton::mouseReleaseEvent(QMouseEvent *event)
{
    
    
    Q_UNUSED(event)

    if(isPressed)
    {
    
    
        isPressed = false;
        emit btnClicked();
    }
}
#endif

void RoundButton::paintEvent(QPaintEvent *event)
{
    
    
    Q_UNUSED(event)

    QPainter painter(this);
    //抗锯齿
    painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
	//绘画路径
    QPainterPath path;
    path.addEllipse(this->rect().center(),m_radius,m_radius);
    painter.setClipPath(path);
	//绘图
    painter.drawPixmap(QRect(0,0,m_radius*2,m_radius*2),pixmap);

}

QPainterPath is an object of graphics building blocks, such as rectangles, ellipses, lines, and curves. Building blocks can be added in closed subpaths, such as rectangles or ovals. A closed path has both a start point and an end point. Or exist independently as unclosed sub-paths, such as straight lines and curves.
addEllipse creates an ellipse within the specified bounding rectangle and adds it to the draw path as a closed subpath.
The ellipse consists of a clockwise curve that begins and ends at zero degrees (3 o'clock).

Finally, draw the picture through drawPixmap. In this example, if the NO_TOUCH_EVENT macro is turned on, it can be used as a circular button, and if it is turned off, it can only be used as a circular avatar.

Of course, you can also use the painter's drawRoundedRect to achieve circular painting. Those who are interested can research this on their own.

Experimental effect

This sample code can be applied to the project with a little modification, and the flexibility is relatively high.

Author: Feima Programmer.
Welcome to technical exchange: QQ: 255895056.
Please indicate the source for reprinting. If there is any inappropriateness, please correct me.