qt绘制圆形按钮

QT 专栏收录该内容
111 篇文章 6 订阅

QT 版本:5.6.0

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

首先,可以在网络上搜索一下自己喜欢的按钮图形(或者可以自行绘制),我以下面的图形为例:

开始制作:

一、建立 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);

}

运行效果:

初始按钮状态:

鼠标放上后状态:

后期补充:

设置屏蔽区域方法一:

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
  • 2
    点赞
  • 1
    评论
  • 16
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值