QT 自定义动态图片按钮(Pushbutton扩展)

闲着无聊,发现QT的默认按钮比较死板;网上找了几个动态效果的按钮,不是限制较多,就是使用麻烦,就自己简单弄了一个,满足有个一点动态的效果,要求不高的场景。

原理:基于Pushbutton扩展,先载入图片,鼠标放上/点击之后按一定比例放大或缩小,从而实现一定动态效果。

1、直接上按钮的代码:

1).h

#ifndef QMYBUTTONA_H
#define QMYBUTTONA_H

#include <QWidget>
#include <QPushButton>
#include <QPaintEvent>
#include <QEvent>
#include <QMouseEvent>
#include <QPainter>
#include <QRect>
#include <QString>
 
#define DISPHASE 2       //2是有三级,0,1,2
#define DISMOVE 0.1          //周边变化大小比例 0.1=10%
#define DISMOVEPRESS 0.05
 
class QMyButtonA : public QPushButton
{
    Q_OBJECT
public:
    explicit QMyButtonA(QWidget *parent = nullptr);
 
public:
    void mySetBackgroudPic(QString str_pix);
 
protected:
    void initImageRectlist();
 
protected:    
    void paintEvent(QPaintEvent *event);/*paintEvent 绘图事件*/
    void enterEvent(QEvent *event);/*enterEvent 鼠标放在按键上事件*/
    void leaveEvent(QEvent *event);/*leaveEvent 鼠标离开按键事件*/
    void mousePressEvent(QMouseEvent *e);/*mousePressEvent 鼠标点击按键事件*/
    void mouseReleaseEvent(QMouseEvent *e);/*mouseReleaseEvent 鼠标松开按键事件*/
 
public:
    int m_curRIndex; //当前show的图片位置索引
    QList<QRect> m_imageRectlist; //图片显示RECT
 
private:
    QPixmap m_imagePix;
 
signals:
public slots:
};
#endif // QMYBUTTONA_H

2).cpp

#include "qmybuttona.h"
#include <QDebug>
#include <math.h>
 
QMyButtonA::QMyButtonA(QWidget *parent) : QPushButton(parent)
{
    m_curRIndex=0;
 
    this->setStyleSheet("QPushButton{border: none; background: transparent;}");//去掉边框,设置背景色
    this->setFlat(true);
}
 
void QMyButtonA::mySetBackgroudPic(QString str_pix)
{
    initImageRectlist();
 
    m_imagePix = QPixmap(); //清空m_imagePix,放置load很多,消耗内存
    m_imagePix.load(str_pix); // 使用load()函数加载图像(str_pix);
}
 
void QMyButtonA::initImageRectlist()
{
    m_curRIndex=0;
    m_imageRectlist.clear();
 
    QRect myRect(0,0,this->width(),this->height());
 
    int wadj2=ceil(this->width()*DISMOVEPRESS);//向上取整
    int hadj3=ceil(this->height()*DISMOVEPRESS);//向上取整
    m_imageRectlist.append(myRect.adjusted(wadj2,hadj3,-wadj2,-hadj3));//正常状态下显示大小,比控件小,按比例缩小DISMOVE
 
    m_imageRectlist.append(myRect); //鼠标放上去的大小,还原,控件大小
 
    int wadj1=ceil(this->width()*DISMOVE);//向上取整
    int hadj1=ceil(this->height()*DISMOVE);//向上取整
    m_imageRectlist.append(myRect.adjusted(wadj1,hadj1,-wadj1,-hadj1));  //鼠标按下去的大小
}
 
void QMyButtonA::enterEvent(QEvent *event)
{
    m_curRIndex = 1;
    //update();
    QPushButton::enterEvent(event);
}
 
void QMyButtonA::leaveEvent(QEvent *event)
{
    m_curRIndex = 0;
    //update();
    QPushButton::leaveEvent(event);
}
 
void QMyButtonA::mousePressEvent(QMouseEvent *e)
{
    if(e->button() == Qt::LeftButton)
    {
        m_curRIndex = 2;
        //emit clicked();//可以向外通知
        //update();
    }
    QPushButton::mousePressEvent(e);
}
 
void QMyButtonA::mouseReleaseEvent(QMouseEvent *e)
{
    if(e->button() == Qt::LeftButton)
    {
        m_curRIndex = 0;
        update();
    }
    QPushButton::mouseReleaseEvent(e);
}
 
void QMyButtonA::paintEvent(QPaintEvent *event)
{
    QPushButton::paintEvent(event);  //把button的边框等都画出来了
 
    QPainter painter(this);
    if(m_curRIndex>=m_imageRectlist.size()) return; //异常保护
 
    painter.setRenderHint(QPainter::SmoothPixmapTransform, true);//使用平滑滤波器,抗锯齿
    painter.drawPixmap(m_imageRectlist[m_curRIndex],m_imagePix);//画图画到中间   
}

2、按钮的使用:

m_button_close = new QMyButtonA(this); //或者提升界面pushbutton为QMyButtonA,都行
m_button_close->mySetBackgroudPic(":/image/close_n.png"); //就多加这么一句话就可以了。
connect(m_button_close,&QMyButtonA::clicked,this,&XXXXXXX::mymbtnCloseclicked);  //这个使用和pushbutton用法一致
  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值