QT 圆形窗体，圆形按钮

                                                                            QT 圆形窗体，圆形按钮

一、简要说明

1、在窗体上画一个圆形 (如果添加上点击等事件，这个圆形就相当于一个控件——圆形PushButton)

2、无边框

3、窗体透明化，窗体上的控件不透明

4、实现无边框拖动

代码打包：链接: https://pan.baidu.com/s/1GRd37_QuHLAHqu9Nm2AGiQ 提取码: p9xx 

二、效果

三、工程文件结构

四、源码

1、MyButton.pro文件

QT +=widgets gui

SOURCES += \
    main.cpp \
    circlebutton.cpp

HEADERS += \
    circlebutton.h

 

2、circlebutton.h文件

 

#ifndef CIRCLEBUTTON_H
#define CIRCLEBUTTON_H

#include <QWidget>

class CircleButton : public QWidget
{
    Q_OBJECT      //使用信号与槽需要的宏
public:
    explicit CircleButton(QWidget *parent = 0);    //explicit 避免歧义
    CircleButton(const QString text, QPoint center,int radius,QWidget* parent = 0);

    void paintEvent(QPaintEvent *);                //--绘图事件，调用update()时触发
    void mousePressEvent(QMouseEvent *e);         //--鼠标按下事件
    void mouseReleaseEvent(QMouseEvent *e);     //--鼠标释放事件
    void mouseMoveEvent(QMouseEvent *e);       //--鼠标移动事件

    bool isContains(QPoint p);//判断鼠标是否在圆形范围之内
    void initForm();//初始化窗体
signals:
    void clicked();//点击信号
public slots:
private:
    QString _text;    //控件显示文本
    QPoint _center;  //圆心位置坐标
    QPoint beginPos;//圆形起始坐标
    int _radius;   //圆形半径
public:
    bool _pressed;//左键单击变色控制
};

#endif // CIRCLEBUTTON_H

 

3、circlebutton.cpp文件

 

#include "circlebutton.h"
#include <QPainter>
#include <QMouseEvent>

CircleButton::CircleButton(QWidget *parent) :
    QWidget(parent),_text("CircleButton"),_center(30,30),_radius(20)
{
    initForm();
}
CircleButton::CircleButton(const QString text, QPoint center,int radius,QWidget* parent):
    QWidget(parent),_text(text), _center(center),_radius(radius)
{
    initForm();
}

void CircleButton::initForm()
{
    _pressed = false;
    beginPos = this->pos();
    //无边框
    this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint|Qt::WindowStaysOnTopHint);
    /*  窗口整体透明，但窗口控件不透明*/
   this->setAttribute(Qt::WA_TranslucentBackground,true);
}
void CircleButton::paintEvent(QPaintEvent *)
{
    QPainter p(this);//将当前窗体作为画布
    if(_pressed)
        p.setBrush(Qt::yellow);//粉刷为黄色
    else
        p.setBrush(QColor(255,255,255,10));
    p.setPen(Qt::NoPen);//没有线条
    //画圆形
    p.drawEllipse(_center,_radius,_radius);
    //添加文本
    QPen pen = QPen(Qt::black);
    p.setPen(pen);
    p.drawText(QRect(_center.x()-_radius,_center.x()-_radius,2*_radius,2*_radius), _text, QTextOption(Qt::AlignCenter));//文本居中：QTextOption(Qt::AlignCenter)
}
void CircleButton::mousePressEvent(QMouseEvent *e)
{
   if(isContains(e->pos()))
    {
        _pressed = true;
        beginPos = e->pos();//鼠标相对窗体的位置
        update();//触发窗体重绘
    }

}

void CircleButton::mouseReleaseEvent(QMouseEvent *e)
{
    _pressed = false;
    update();//触发窗体重绘

    if(isContains(e->pos()))//当鼠标点击按钮
        emit clicked();//发送点击信号

}

void CircleButton::mouseMoveEvent(QMouseEvent *e)       //--鼠标移动事件
{
    if (_pressed)
    {//当前鼠标相对窗体的位置-刚按下左键时的相对位置=鼠标移动的大小
         this->move(e->pos() - beginPos + this->pos());
         //           鼠标移动的大小+窗体原来的位置=窗体移动后的位置
    }
}


bool CircleButton::isContains(QPoint p)
{
    return (_center.x()-_radius < p.x()
            && _center.x()+_radius > p.x()
            && _center.y()-_radius < p.y()
            && _center.y()+_radius > p.y());
}

 

4、main.cpp文件

 

#include <QApplication>
#include "circlebutton.h"

int main(int argc,char** argv)
{
    QApplication app(argc,argv);
    CircleButton *circle= new CircleButton("圆形窗体",QPoint(40,40),40);
    circle->show();
    return app.exec();
}

五、视频水印   (窗体置顶)

1、效果

2、修改后的代码

circlebutton.h文件

#ifndef CIRCLEBUTTON_H
#define CIRCLEBUTTON_H

#include <QWidget>
#include <QMenu>
class CircleButton : public QWidget
{
    Q_OBJECT
public:
    explicit CircleButton(QWidget *parent = 0);
    CircleButton(const QString text, QPoint center,int radius,QWidget* parent = 0);

    void paintEvent(QPaintEvent *);
    void mousePressEvent(QMouseEvent *e);
    void mouseReleaseEvent(QMouseEvent *e);
    void mouseMoveEvent(QMouseEvent *e);       //--鼠标移动事件
    void contextMenuEvent(QContextMenuEvent *);  //--右键菜单事件
    void closeEvent(QCloseEvent *);     //重写退出

    bool isContains(QPoint p);//判断鼠标是否在控件范围之内
    void initForm();//初始化窗体
    void setText(QString text);//设置显示文本
signals:
    void clicked();//点击信号
public slots:
    void inputText();//输入文本
    QString getText();
private:
    QString _text;
    QPoint _center;
    QPoint beginPos;
    QMenu *menu; //右键菜单对象
    int _radius;
public:
    bool _pressed;//单击按钮变色控制
};

#endif // CIRCLEBUTTON_H

circlebutton.cpp文件

#include "circlebutton.h"
#include <QPainter>
#include <QMouseEvent>
#include <QInputDialog>
#include <QLineEdit>


CircleButton::CircleButton(QWidget *parent) :
    QWidget(parent),_text("CircleButton"),_center(30,30),_radius(20)
{
    initForm();
}
CircleButton::CircleButton(const QString text, QPoint center,int radius,QWidget* parent):
    QWidget(parent),_text(text), _center(center),_radius(radius)
{
    initForm();
}

void CircleButton::initForm()
{
    _pressed = false;
    beginPos = this->pos();
    //无边框
    this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint|Qt::WindowStaysOnTopHint);
    /*  窗口整体透明，但窗口控件不透明*/
   this->setAttribute(Qt::WA_TranslucentBackground,true);
    menu = new QMenu(this);//创建右键菜单
    menu->addAction("设置文本", this, SLOT(inputText()));
    menu->addAction("退出", this, SLOT(close()));
}
void CircleButton::paintEvent(QPaintEvent *)
{
    QPainter p(this);//将当前窗体作为画布
    QPen pen = QPen(Qt::red);
    pen.setWidth(1);
    p.setPen(pen);
    if(_pressed)
        p.setBrush(Qt::yellow);//粉刷为黄色
    else
        p.setBrush(QColor(255,255,255,1));
    p.drawText(QRect(_center.x()-_radius,_center.x()-_radius,2*_radius,2*_radius), _text, QTextOption(Qt::AlignCenter));//文本居中：QTextOption(Qt::AlignCenter)

    pen.setColor(QColor(255,255,255,1));
    p.setPen(pen);
    //画圆
    p.drawEllipse(_center,_radius,_radius);

}
void CircleButton::mousePressEvent(QMouseEvent *e)
{
   if(e->button() == Qt::LeftButton && isContains(e->pos()))
    {
        _pressed = true;
        beginPos = e->pos();//鼠标相对窗体的位置
        update();//触发窗体重绘
    }

}

void CircleButton::mouseReleaseEvent(QMouseEvent *e)
{
    _pressed = false;
    update();//触发窗体重绘

    if(isContains(e->pos()))//当鼠标点击按钮
        emit clicked();//发送点击信号

}

void CircleButton::mouseMoveEvent(QMouseEvent *e)       //--鼠标移动事件
{
    if (_pressed)
    {//当前鼠标相对窗体的位置-刚按下左键时的相对位置=鼠标移动的大小
         this->move(e->pos() - beginPos + this->pos());
         //           鼠标移动的大小+窗体原来的位置=窗体移动后的位置
    }
}

void CircleButton::contextMenuEvent(QContextMenuEvent *)
{
    this->setCursor(Qt::ArrowCursor);
    menu->exec(cursor().pos());
}

bool CircleButton::isContains(QPoint p)
{
    return (_center.x()-_radius < p.x()
            && _center.x()+_radius > p.x()
            && _center.y()-_radius < p.y()
            && _center.y()+_radius > p.y());
}
void CircleButton::setText(QString text)
{
    this->_text = text;
}

void CircleButton::inputText()
{
    bool ok = false;

    QString text = QInputDialog::getText(this,tr("设置文本"),tr("请输入文本"),QLineEdit::Normal,getText(),&ok,0);
    if ( ok && !text.isEmpty() )
    {
        this->setText(text);
    }
}
void CircleButton::closeEvent(QCloseEvent * )
{
    this->close();
}
QString CircleButton::getText()
{
    return this->_text;
}

六、圆形按钮

       使用QSS样式实现圆形按钮。     

        效果:PushButton2是直接右键-->改变样式表，PushButton3是再代码控制的。

       工程结构: 

 布局:三个一样大小的PushButton 

  样式： 

QPushButton{/*默认显示*/
border-radius:70px;/*圆角弧度(为正方形边长一半时就是圆形)*/
background-color:rgba(0,255,0,255);/*背景色*/
}
QPushButton:hover{/*鼠标悬停*/
background-color:rgba(0,0,255,255);
}
QPushButton:pressed{/*鼠标按下*/
background-color:rgba(255,0,0,255);
}