高亮按钮

1.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();
protected:
    void paintEvent(QPaintEvent *event);
    void drawBorderOut(QPainter *painter);
    void drawBg(QPainter *painter);
    void drawText(QPainter *painter);
    void drawOverlay(QPainter *painter);
    void drawBorderIn(QPainter *painter);
private:
    Ui::Widget *ui;
    QColor borderOutColorStart;     //外边框渐变开始颜色
    QColor borderOutColorEnd;       //外边框渐变结束颜色
    QColor borderInColorStart;      //里边框渐变开始颜色
    QColor borderInColorEnd;        //里边框渐变结束颜色
    QColor bgColor;                 //背景颜色
    bool showOverlay;               //是否显示遮罩层
    QColor overlayColor;            //遮罩层颜色
};

#endif // WIDGET_H

 2.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    setWindowFlags(Qt::FramelessWindowHint);

    borderOutColorStart = QColor(255, 255, 255);//纯白
    borderOutColorEnd = QColor(166, 166, 166);//一点黑
//    borderOutColorEnd = QColor(0,0,0);
    borderInColorStart = QColor(166, 166, 166);//一点黑
    borderInColorEnd = QColor(255, 255, 255);//纯白

    bgColor = QColor(100, 184, 255);//蓝色
    showOverlay = true;
    overlayColor = QColor(255, 255, 255);//白色
 //   overlayColor = QColor(0,0,0);//黑色
}

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

void Widget::paintEvent(QPaintEvent *event)
{
    int width = this->width();
    int height = this->height();
    int side = qMin(width, height);//宽和高的最小值

    //绘制准备工作,启用反锯齿,平移坐标轴中心,等比例缩放
    QPainter painter(this);
    //绘图抗锯齿,绘制字体抗锯齿
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    //移至中点
    painter.translate(width / 2, height / 2);
    //坐标系统缩放
    painter.scale(side / 200.0, side / 200.0);
    //比例大于1放大，小于1缩小
    //等价于在(200*200)的画布下进行绘图


//    //绘制外边框
    drawBorderOut(&painter);
//    //绘制内边框
    drawBorderIn(&painter);
//    //绘制内部指示颜色
    drawBg(&painter);
//    //绘制遮罩层
    drawOverlay(&painter);
//    //没有遮罩层，就是纯纯的颜色
}

void Widget::drawBorderOut(QPainter *painter)
{
    int radius = 99;
    painter->save();
    painter->setPen(Qt::NoPen);
    //QLinearGradient(qreal x1, qreal y1, qreal x2, qreal y2)
    QLinearGradient borderGradient(0, -radius, 0, radius);
    borderGradient.setColorAt(0, borderOutColorStart);
    borderGradient.setColorAt(1, borderOutColorEnd);
    painter->setBrush(borderGradient);
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
    painter->restore();
}
void Widget::drawBorderIn(QPainter *painter)
{
    int radius = 90;
    painter->save();
    painter->setPen(Qt::NoPen);
    QLinearGradient borderGradient(0, -radius, 0, radius);
    borderGradient.setColorAt(0, borderInColorStart);
    borderGradient.setColorAt(1, borderInColorEnd);
    painter->setBrush(borderGradient);
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
    painter->restore();
}
void Widget::drawBg(QPainter *painter)
{
    int radius = 80;
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(bgColor);
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
    painter->restore();
}
void Widget::drawOverlay(QPainter *painter)
{
    if (!showOverlay) {
        return;
    }

    int radius = 80;
    painter->save();
    painter->setPen(Qt::NoPen);

    QPainterPath smallCircle;
    QPainterPath bigCircle;
    radius -= 1;
    smallCircle.addEllipse(-radius, -radius, radius * 2, radius * 2);
    radius *= 2;
    bigCircle.addEllipse(-radius, -radius + 140, radius * 2, radius * 2);


//    painter->drawPath(smallCircle);
//    painter->setBrush(Qt::blue);
//    painter->drawPath(bigCircle);
    //高光的形状为小圆扣掉大圆的部分
    QPainterPath highlight = smallCircle - bigCircle;

    //QPainterPath highlight = smallCircle;
//    QPainterPath highlight = bigCircle;
    QLinearGradient linearGradient(0, -radius / 2, 0, 0);
    overlayColor.setAlpha(255);
    linearGradient.setColorAt(0.0, overlayColor);
    overlayColor.setAlpha(0);
    linearGradient.setColorAt(1.0, overlayColor);
    painter->setBrush(linearGradient);
    painter->rotate(-20);
    painter->drawPath(highlight);

    painter->restore();
}

 3.结果