Qt 2D绘图(3)：渐变原理(QGradient类及其子类)

最新推荐文章于 2023-09-13 16:27:03 发布

hyongilfmmm

最新推荐文章于 2023-09-13 16:27:03 发布

阅读量2.5k

点赞数 4

分类专栏： Qt 文章标签： Qt 2D绘图 Qt渐变 QGradient QRadialGradient QLinearGradient

本文链接：https://blog.csdn.net/hyongilfmmm/article/details/83229769

版权

Qt 专栏收录该内容

40 篇文章 141 订阅

订阅专栏

Qt 2D绘图(3)：渐变原理(QGradient类及其子类)

本文为原创文章，转载请注明出处，或注明转载自“黄邦勇帅(原名：黄勇)

本文出自本人原创著作《Qt5.10 GUI完全参考手册》网盘地址：
https://pan.baidu.com/s/1iqagt4SEC8PUYx6t3ku39Q
《C++语法详解》网盘地址：https://pan.baidu.com/s/1dIxLMN5b91zpJN2sZv1MNg

若对C++语法不熟悉，建议参阅本人所著《C++语法详解》一书，电子工业出版社出版，该书语法示例短小精悍，对查阅C++知识点相当方便，并对语法原理进行了透彻、深入详细的讲解，可确保读者彻底弄懂C++的原理，彻底解惑C++，使其知其然更知其所以然。此书是一本全面了解C++不可多得的案头必备图书。

本文需要知道怎样使用QBrush，该类比较简单，可参阅Qt帮助文档

QGradient类与QBrush类一起用于指定渐变填充。
1、Qt目前支持3种类型的渐变填充
线性渐变：使用QLinearGradient类描述，在起点(xs, ys)和终点(xe, ye)之间插入颜色，在起点和终点之间的区域为线性渐变区域。原理见图12-40。
辐射(径向)渐变：由QRadialGradient类描述。由中心点(xc, yc)和半径r定义一个圆(该圆即为辐射渐变区域)，然后颜色从焦点(xf, yf)向外扩散，原理见图12-40。
圆锥渐变：由QConicalGradient类描述。由一个中心点(xc, yc)和一个角度a定义，然后颜色在中心点周围像钟表那样扩散。原理见图12-40
在这里插入图片描述

2、渐变颜色的设置
渐变颜色不能使用QBrush::setColor()函数设置，渐变颜色需要使用停止点和颜色两个属性来指定，可使用QGradient::setColorAt()函数来设置单个的停止点和颜色，还可使用QGradient::setStops()来一次定义多个<停止点，颜色>对，setStops()函数需要使用QGradientStop类型的参数。注：停止点使用的是0~1之间的数值来表示的，0表示起点，1表示终点。
<位置，颜色>对是使用QGradientStop类型来描述的，QGradientStop类型原型如下

typedef QPair<qreal, QColor> QGradientStop
其中QPair是一个模板类，用于存储对项，比如QPair <T1, T2> pr，表示pr存储一个T1类型的值和一个T2类型的值。

示例12.11：渐变的实际应用(效果见图12-41)

QPainter pr(this);
//创建线性渐变，起点为(33,50),终点为(111,50);，在这两点之间使用渐变颜色
    	QLinearGradient g(QPointF(33,50),QPointF(100,50));   	
//渐变颜色设置需位于QBrush bs(g)之前。
    	g.setColorAt(0,QColor(111,1,1));		//设置起始点颜色为红色
    	g.setColorAt(0.5,QColor(1,111,1)); 	//在起点和终点之间(此处为中点)设置颜色为绿色
    	g.setColorAt(1,QColor(222,222,1));  	//设置终点颜色为黄色。
	//使用以上设置后，颜色将从起点的红色，逐渐变为中点的绿色，再由绿色逐渐变为黄色
    	QBrush bs(g);
    	pr.setBrush(bs);
    	pr.drawRect(33,50,111,111);

在这里插入图片描述

3、渐变色的传播方式(spread)
渐变色的传播是指在渐变区域以外的区域渐变色是怎样进行扩散的。可使用QGradient::setSpread()函数进行设置，其传播方式使用枚举QGradient::Spread进行描述，取值见表12-13，外观及原理见图12-42)。
注意：传播方式仅对线性渐变和辐射渐变有作用，因为这两种类型的渐变是有边界的，而锥形渐变其渐变范围是0~360度的圆，因此没有渐变边界，所以传播方式不适用于锥形渐变。
在这里插入图片描述

4、坐标模式
坐标模式是指的怎样指定渐变色的坐标，共有3种方法，使用枚举QGradient::CoordinateMode进行描述(见表12-14及图12-43)，可使用QGradient::setCoordinateMode()函数进行设置。
在这里插入图片描述

示例12.12：渐变坐标模式
void paintEvent(QPaintEvent *e){
    	QPainter pr(this);
    	QLinearGradient g(QPointF(0.1,0.50),QPointF(0.50,0.50));	//起始/终点坐标以小数点指定
    	g.setCoordinateMode(QGradient::ObjectBoundingMode);  		//设置渐变坐标模式为对象边界模式
    	g.setColorAt(0,QColor(255,255,255));  					//渐变起始颜色(白色)
    	g.setColorAt(0.5,QColor(111,1,1));						//渐变中点颜色(红色)
    	g.setColorAt(1,QColor(255,255,1));						//渐变最终停止点颜色(黄色)
    	g.setSpread(QGradient::RepeatSpread);  					//设置渐变色传播模式(重复传播)
    	QBrush bs(g);											//创建画刷
    	pr.setBrush(bs);
    	pr.drawRect(55,55,111,111);  							//渐变填充区域1
    	pr.drawRect(222,55,111,111);  							//渐变填充区域2
    	pr.drawLine(66.1,0,66.1,444);    	pr.drawLine(110.5,0,110.5,444);  //用于测量的直线
    	pr.drawLine(233.1,0,233.1,444);    	pr.drawLine(277.5,0,277.5,444);} //用于测量的直线

运行结果及说明见图12-44
在这里插入图片描述

5、QGradient类中的函数
在这里插入图片描述

6、QLinearGradient类(线性渐变)中的函数
在这里插入图片描述

7、QConicalGradient类(圆锥渐变)中的函数
在这里插入图片描述

示例12.13：圆锥渐变(效果见图12-45)

void paintEvent(QPaintEvent *e){
QPainter pr(this);
    QConicalGradient g(QPointF(166,166),55);
    g.setColorAt(0,QColor(255,255,255));
    g.setColorAt(0.5,QColor(111,1,1));
g.setColorAt(1,QColor(1,111,1));
//传播方式对于圆锥渐变不起作用
    g.setSpread(QGradient::RepeatSpread);   
    QBrush bs(g);    pr.setBrush(bs);
    pr.drawRect(1,1,333,333);}

在这里插入图片描述

8、QRadialGradient类(辐射渐变)中的函数
(1)、构造函数
在这里插入图片描述
(2)、QRadialGradient类中的其他函数(见表12-16)

示例12.14：扩展的辐射渐变(结果见图12-47)
void paintEvent(QPaintEvent *e){
QPainter pr(this);
   	QRadialGradient g(QPointF(166,166),155,QPointF(222,222),66);
    g.setColorAt(0,QColor(255,255,255));	//开始颜色(白色)
    g.setColorAt(0.5,QColor(111,1,1));  	//中间颜色(红色)
    g.setColorAt(1,QColor(255,255,1));  	//终点颜色(黄色)
    g.setSpread(QGradient::RepeatSpread);	//传播方式(重复)
    QBrush bs(g);    pr.setBrush(bs);
    pr.drawRect(1,1,333,333);}

在这里插入图片描述

示例12.15：简单的辐射渐变与传播方式(效果见图12-48)
void paintEvent(QPaintEvent *e){
 	QPainter pr(this);
    QRadialGradient g(QPointF(166,166),66,QPointF(200,200));
    g.setColorAt(0,QColor(255,255,255));
    g.setColorAt(0.5,QColor(111,1,1));
    g.setColorAt(1,QColor(255,255,1));
    g.setSpread(QGradient::RepeatSpread);   	//传播方式为重复传播
    QBrush bs(g);			pr.setBrush(bs);
pr.drawRect(1,1,333,333);    			
pr.setBrush(Qt::NoBrush);				//清除画刷
pr.drawEllipse(QPointF(166,166),66,66);  	//绘制一个圆，该圆的大小与辐射渐变区域相同。
//以下代码用于标出中心点和焦点的位置。
    pr.drawLine(166,166,176,166);       pr.drawLine(166,166,166,156);
    pr.drawLine(200,200,210,200);   pr.drawLine(200,200,200,190);}

在这里插入图片描述