Search code examples
qtqt5qpushbuttonqpainterpath

How to change QPainterPath color after clicking on QPushButton


I subclassed a QPushButton so that I was able to re-implement the paintEvent(QPaintEvent *paint) method also advised by the official documentation.

Below is the sequence of operations:

a) After I launch the application the button is below:

b

b) This is after I hover on it:

c

c) then I click the button:

b

d) and finally I release the mouse

d

e) go away from the button

b

However the problem is that the QPainterPath with which I designed the green box it should be red after I release the button. And, of course, it should become green again after I click again the button.

Below the code:

custombutton.h

class CustomButton : public QPushButton
{
    Q_OBJECT
public:
    CustomButton(QWidget *parent = nullptr);
    ~CustomButton();

    QString FirstName = "MACHINE";
    QString LastName = "CONTROL";

protected:
    void paintEvent(QPaintEvent *);
};

custombutton.cpp

CustomButton::CustomButton(QWidget *parent) : QPushButton(parent)
{
    setGeometry(150, 150, 110, 110);
    setAttribute(Qt::WA_TranslucentBackground);
    setStyleSheet(
        "QPushButton{background-color: lightGray;border: 1px solid black; border-radius: 5px;}"
        "QPushButton:hover{background-color: gray;}"
        "QPushButton:pressed{background-color: lightGray;}");
}

CustomButton::~CustomButton()
{

}    

void CustomButton::paintEvent(QPaintEvent *paint)
{
    QPushButton::paintEvent(paint);
    QPainter p(this);
    p.setRenderHint(QPainter::Antialiasing);
    QPainterPath path;
    path.addRoundedRect(QRectF(15, 15, 80, 5), 2, 2);
    QPen pen(Qt::black, 0.3);
    p.setPen(pen);
    p.fillPath(path, Qt::darkGreen);
    p.drawPath(path);
    p.save();

    p.drawText(QPoint(20, 60), FirstName);
    p.drawText(QPoint(20, 80), LastName);
    p.setFont(QFont("Arial", 10));
    p.restore();
}

mainwindow.h

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

public slots:
    void onClickedButton();
private:
    Ui::MainWindow *ui;
    CustomButton *newBtn;
};

mainwindow.cpp

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    newBtn = new CustomButton(this);
    newBtn->show();
    connect(newBtn, &QPushButton::clicked, this, &MainWindow::onClickedButton);

}

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

void MainWindow::onClickedButton()
{
    QPushButton* target = qobject_cast<QPushButton*>(sender());
    if (target != nullptr)
    {
        QPainter p;
        p.setRenderHint(QPainter::Antialiasing);
        QPainterPath path;
        path.addRoundedRect(QRectF(15, 15, 80, 5), 2, 2);
        QPen pen(Qt::black, 0.3);
        p.setPen(pen);
        p.fillPath(path, Qt::darkRed);
        p.drawPath(path);
        p.save();
        p.restore();
    }
}

As you see in the MainWindow I created a function onClickedButton() which I thought would have triggered the QPainterPath into red after clicked. And in order to do that I casted it into an object (qobject_cast). But unfortunately it didn't work as expexted.


Solution

  • The solution is to create a flag that indicates the color and call update() for repainting:

    #ifndef CUSTOMBUTTON_H
    #define CUSTOMBUTTON_H
    
    #include <QPushButton>
    
    class CustomButton : public QPushButton
    {
        Q_OBJECT
    public:
        CustomButton(QWidget *parent = nullptr);
        ~CustomButton();
    
        QString FirstName = "MACHINE";
        QString LastName = "CONTROL";
    private Q_SLOTS:
        void handleClicked();
    protected:
        void paintEvent(QPaintEvent *);
    private:
        bool state;
    };
    #endif // CUSTOMBUTTON_H
    
    #include "custombutton.h"
    
    #include <QPainter>
    #include <QPainterPath>
    
    
    CustomButton::CustomButton(QWidget *parent) : QPushButton(parent), state(true)
    {
        setGeometry(150, 150, 110, 110);
        setAttribute(Qt::WA_TranslucentBackground);
        setStyleSheet(
            "QPushButton{background-color: lightGray;border: 1px solid black; border-radius: 5px;}"
            "QPushButton:hover{background-color: gray;}"
            "QPushButton:pressed{background-color: lightGray;}");
        connect(this, &QPushButton::clicked, this, &CustomButton::handleClicked);
    }
    
    CustomButton::~CustomButton()
    {
    
    }
    
    void CustomButton::handleClicked()
    {
        state = !state;
        update();
    }
    
    void CustomButton::paintEvent(QPaintEvent *paint)
    {
        QPushButton::paintEvent(paint);
        QPainter p(this);
        p.setRenderHint(QPainter::Antialiasing);
        QPainterPath path;
        path.addRoundedRect(QRectF(15, 15, 80, 5), 2, 2);
        QPen pen(Qt::black, 0.3);
        p.setPen(pen);
        p.fillPath(path, state ? Qt::darkGreen: Qt::darkRed);
        p.drawPath(path);
    
        p.drawText(QPoint(20, 60), FirstName);
        p.drawText(QPoint(20, 80), LastName);
        p.setFont(QFont("Arial", 10));
    }