高亮按鈕

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.結果