qt绘制圆形按钮

时间：2024-03-14 15:18:28

QT 版本：5.6.0

官方的按钮有些普通，如果我们想要换成自己喜欢的按钮而却无从下手，那么请继续往下阅读（皮一下）。

首先，可以在网络上搜索一下自己喜欢的按钮图形（或者可以自行绘制），我以下面的图形为例：

qt绘制圆形按钮

开始制作：

一、建立 QT 工程，并加入图形资源

创建好工程，向工程中加入资源文件：

qt绘制圆形按钮

在资源文件中加入两个按钮图片，一个用于正常显示，一个用于鼠标停留的时候显示：

qt绘制圆形按钮

二、构造 MyButton 类

该类继承自 QPushButton

借助 enterEvent 与 leaveEvent 实现按钮的动态变化。

mybutton.h 文件内容：

#ifndef MYBUTTON_H
#define MYBUTTON_H

#include <QPushButton>
#include <QWidget>

class MyButton : public QPushButton
{
Q_OBJECT

public:
MyButton(QWidget *);

protected:
virtual void enterEvent(QEvent *);
virtual void leaveEvent(QEvent *);
};

#endif // MYBUTTON_H

三、实现 MyButton 类的各个接口

mybutton.cpp 文件内容：

#include "mybutton.h"
#include "ui_widget.h"
#include <QPixmap>
#include <QBitmap>

MyButton::MyButton(QWidget *parent):
QPushButton(parent)
{
QPixmap pixmap(":/init.png");

resize(pixmap.size());
<span class="hljs-comment">/* 设置按钮的有效区域 */</span>
setMask(QBitmap(pixmap.mask()));
setStyleSheet(<span class="hljs-string">"QPushButton{border-image: url(:/init.png);}"</span>);

}

void MyButton::enterEvent(QEvent *)
{
setStyleSheet(“QPushButton{border-image: url(:/click.png);}”);
}

void MyButton::leaveEvent(QEvent *)
{
setStyleSheet(“QPushButton{border-image: url(:/init.png);}”);
}

引入 QPixmap 的原因：借助 pixmap 实现按钮的 setMask 接口，该功能是禁止掉图形外的区域点击有效。

四、创建 MyButton

Widget.cpp 文件中加入：

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

<span class="hljs-keyword">new</span> MyButton(this);
this-&gt;setWindowFlags(Qt::FramelessWindowHint);

}

运行效果：

初始按钮状态：

qt绘制圆形按钮

鼠标放上后状态：

qt绘制圆形按钮

后期补充：

设置屏蔽区域方法一：

QPixmap pixmap(":/init.png");

/* 设置按钮的有效区域 */
setMask(QBitmap(pixmap.mask()));

设置屏蔽区域方法二：

/* 半径为 35 的圆形按钮 */
setMask(QRegion(0,0,70,70,QRegion::Ellipse));
转载自：https://www.cnblogs.com/GyForever1004/category/1151547.html

相关文章