Qt浅谈之二十四三种渐变和圆角矩形

一、简介

        Qt提供了三种渐变画刷，分别是线性渐变(QLinearGradient)、辐射渐变(QRadialGradient)、角度渐变(QConicalGradient)。很多绘图系统都内置了渐变的功能，渐变的设置就是在QBrush里面。
       QT的QPainterPath类由一些图形如曲线、矩形、椭圆组成的对象，能保存已经绘制好的图形从而实现图形元素的构造和复用，图形状只需创建一次，然后调用QPainter::drawPath()函数多次绘制，painterpath可以加入闭合或不闭合的图形，QPainterPath可用于填充，描边，clipping。QPainterPath一旦创建，直线和曲线都可以被添加入path，通过lineTo()、arcTo()、cubicTo()和quadTo()函数，currentPosition()是最后一次绘制后的“结束点”（或初始点），使用moveTo()移动currentPosition()不会添加任何元素，moveTo() 隐含的开始一个新subpath，并且闭合前一个。 一个path 添加到另一个path用connectPath()。它默认是从原点(0，0)开始绘图，可以使用moveTo()改变绘图的开始位置。

二、效果图

        三种渐变的方向和效果图：

三、详解

1、代码

（1）widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPainter>

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = 0);
    ~Widget();

protected:
    void paintEvent(QPaintEvent *event);
};

#endif // WIDGET_H

（2）widget.cpp

#include "widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    resize(400, 400);
}

Widget::~Widget()
{

}

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::SmoothPixmapTransform);
    painter.save();
    //线性渐变
    QLinearGradient linearGradient(10,10,100,100);
    //创建了一个QLinearGradient对象实例，参数为起点和终点坐标，可作为颜色渐变的方向
    //painter.setPen(Qt::NoPen);
    linearGradient.setColorAt(0.0,Qt::green);
    linearGradient.setColorAt(0.2,Qt::white);
    linearGradient.setColorAt(0.4,Qt::blue);
    linearGradient.setColorAt(0.6,Qt::red);
    linearGradient.setColorAt(1.0,Qt::yellow);
    painter.setBrush(QBrush(linearGradient));
    painter.drawEllipse(10,10,100,100);
    //前面为左边，后面两个参数为横轴和纵轴,上面的四行分别设置渐变的颜色和路径比例

    //辐射渐变
    QRadialGradient radialGradient(10+50 , 120+50, 50, 60, 170);
    //创建了一个QRadialGradient对象实例，参数分别为中心坐标，半径长度和焦点坐标,如果需要对称那么中心坐标和焦点坐标要一致
    radialGradient.setColorAt(0,Qt::green);
    radialGradient.setColorAt(0.2,Qt::white);
    radialGradient.setColorAt(0.4,Qt::blue);
    radialGradient.setColorAt(0.6,Qt::red);
    radialGradient.setColorAt(1.0,Qt::yellow);
    painter.setBrush(QBrush(radialGradient));
    painter.drawEllipse(10,120,100,100);//在相应的坐标画出来

    //弧度渐变
    QConicalGradient conicalGradient(10+50,  230 + 50,0);
    //创建了一个QConicalGradient对象实例，参数分别为中心坐标和初始角度
    conicalGradient.setColorAt(0,Qt::green);
    conicalGradient.setColorAt(0.2,Qt::white);
    conicalGradient.setColorAt(0.4,Qt::blue);
    conicalGradient.setColorAt(0.6,Qt::red);
    conicalGradient.setColorAt(0.8,Qt::yellow);
    conicalGradient.setColorAt(1.0,Qt::green);
    //设置渐变的颜色和路径比例
    painter.setBrush(QBrush(conicalGradient));
    painter.drawEllipse(10, 230, 100, 100);//在相应的坐标画出来
    painter.restore();

    painter.save();
    QConicalGradient conicalGradient2(width()/2, height()/2, 90);
    conicalGradient2.setColorAt(0, QColor(45, 204, 112));
    conicalGradient2.setColorAt(1.0, QColor(51, 152, 219));
    painter.setPen(QPen(QBrush(conicalGradient2), 30));
    painter.drawEllipse(QRectF((width()/2 - 65), (height()/2 - 65), 130, 130));
    painter.restore();

    //QPainterPath画圆角矩形
    painter.save();
    const qreal radius = 26;
    QPainterPath path;
    QRectF rect = QRect(150, 10, 100, 100);
    QLinearGradient myGradient(rect.topLeft(), rect.bottomRight());
    myGradient.setColorAt(0.0,Qt::green);
    myGradient.setColorAt(0.9,Qt::yellow);
    path.moveTo(rect.topRight() - QPointF(radius, 0));
    path.lineTo(rect.topLeft() + QPointF(radius, 0));
    path.quadTo(rect.topLeft(), rect.topLeft() + QPointF(0, radius));
    path.lineTo(rect.bottomLeft() + QPointF(0, -radius));
    path.quadTo(rect.bottomLeft(), rect.bottomLeft() + QPointF(radius, 0));
    path.lineTo(rect.bottomRight() - QPointF(radius, 0));
    path.quadTo(rect.bottomRight(), rect.bottomRight() + QPointF(0, -radius));
    path.lineTo(rect.topRight() + QPointF(0, radius));
    path.quadTo(rect.topRight(), rect.topRight() + QPointF(-radius, -0));
    painter.setBrush(myGradient);
    painter.fillPath(path, QColor(Qt::green));
    painter.drawPath(path);
    painter.restore();
    QWidget::paintEvent(event);
}

（3）main.cpp

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

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

2、运行结果

四、总结

（1）文中的效果在实际应用中还需要进一步的调试，以达到最佳的效果。
（2）若有不足，请留言，在此先感谢！