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)若有不足,请留言,在此先感谢!
更多推荐



所有评论(0)