渐变 -- QBrush

2024-01-04 19:48
文章标签 渐变 qbrush

本文主要是介绍渐变 -- QBrush,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

http://www.devbean.net/2012/11/qt-study-road-2-gradient

渐变是绘图中很常见的一种功能,简单来说就是可以把几种颜色混合在一起,让它们能够自然地过渡,而不是一下子变成另一种颜色。渐变的算法比较复杂,写得不好的话效率会很低,好在很多绘图系统都内置了渐变的功能,Qt 也不例外。渐变一般是用在填充里面的,所以,设置渐变是在QBrush里面。

Qt 提供了三种渐变:线性渐变(QLinearGradient)、辐射渐变(QRadialGradient)和角度渐变(QConicalGradient)。我们可以在 Qt API 手册中看到这几种渐变的区别:

线性渐变:
QLinearGradient 示例

辐射渐变:
QRadialGradient 示例

角度渐变:
QConicalGradient 示例

具体细节可以参考文档。下面我们通过一个示例看看如何使用渐变进行填充:

像以前一样,我们也只给出了paintEvent()的代码。这段代码看起来也相当清晰:首先我们打开了反走样,然后创建一个QLinearGradient对象实例。QLinearGradient也就是线性渐变,其构造函数有四个参数,分别是 x1,y1,x2,y2,即渐变的起始点和终止点。在这里,我们从 (60, 50) 点开始渐变,到 (200, 200) 点止。关于坐标的具体细节,我们会在后面的章节中详细介绍。渐变的颜色是在setColorAt()函数中指定的。下面是这个函数的签名:

这个函数的作用是,把 position 位置的颜色设置成 color。其中,position 是一个 [0, 1] 闭区间的数字。也就是说,position 是相对于我们建立渐变对象时做的那个起始点和终止点区间的一个比例。以这个线性渐变为例,在从 (60, 50) 到 (200, 200) 的线段上,在 0.2,也就五分之一处设置成白色,在 0.6 也就是五分之三处设置成绿色,在 1.0 也就是终点处设置成黑色。创建QBrush对象时,把这个渐变对象传递进去,然后就可以运行了:

线性渐变示例

下面我们开始一个更复杂,也更实用一些的例子:绘制一个色轮(color wheel)。所谓色轮,其实就是一个带有颜色的圆盘(或许你没听说过这个名字,但是你肯定见过这个东西),下面是色轮的运行结果:

色轮示例

我们来看看它的代码:

首先还是新建 QPainter 对象,开启反走样。然后我们将圆盘半径定义为 150。下面创建一个角度渐变实例,其构造函数同样接受三个参数:

前两个参数 cx 和 cy 组成角度渐变的中心点,第三个参数是渐变的起始角度。在我们的例子中,我们将渐变中心点设置为 (0, 0),起始角度为 0。类似线性渐变,角度渐变的setColorAt()函数同样接受两个参数,第一个是角度比例,第二个是颜色。例如,

将 0 度角设置为红色;

将 60 度角设置为黄色。由于一个圆周是 360 度,所以 60.0/360.0 即是这个角度的比例。其余代码以此类推。最后一句,我们将 1.0 处设置为红色,也就是重新回到起始处。至于颜色的分布,这是由颜色空间定义的,有兴趣的朋友可以查阅有关颜色模型的理论。

这是我们唯一不熟悉的函数。QPainter::translate(x, y)函数意思是,将坐标系的原点设置到 (x, y) 点。原本坐标系原点位于左上角,我们使用translate(r, r),将坐标原点设置为 (r, r)。这么一来,左上角的点的坐标就应该是 (-r, -r)。

最后,我们使用drawEllipse()函数绘制圆盘。注意,由于我们已经把坐标原点设置为 (r, r),因此,在绘制时,圆心应该是新的坐标 (0, 0),而不是原来的 (r, r)。

PS:为了理解translate()函数的作用,可以思考下,如果去掉translate()函数的调用,我们的程序应该如何修改。答案是:

不仅我们需要修改最后的绘制语句,还需要注意修改QConicalGradient定义时传入的中心点的坐标。

这篇关于渐变 -- QBrush的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/570407

相关文章

渐变颜色填充

GradientFill函数可以对特定的矩形区域或者三角形区域进行渐变颜色的填充。我们先来看看GradientFill函数到底长得什么样子,帅不帅。 [cpp]  view plain copy print ? BOOL GradientFill(     _In_  HDC hdc,     _In_  PTRIVERTEX pVertex,     _In_  ULONG

C#中的各种画刷, PathGradientBrush、线性渐变(LinearGradientBrush)和径向渐变的区别

在C#中,画刷(Brush)是用来填充图形(如形状或文本)内部区域的对象。在.NET框架中,画刷是System.Drawing命名空间的一部分,通常用于GDI+绘图操作。以下是一些常用的画刷类型: SolidBrush:用于创建单色填充的画刷。HatchBrush:用于创建具有图案填充的画刷。TextureBrush:用于创建具有图像纹理填充的画刷。LinearGradientBrush:用于创

【CSS渐变】背景中的百分比:深入理解`linear-gradient`,进度条填充

在现代网页设计中,CSS渐变是一种非常流行的视觉效果,它为网页背景或元素添加了深度和动态感。linear-gradient函数是实现线性渐变的关键工具,它允许我们创建从一种颜色平滑过渡到另一种颜色的视觉效果。在本篇博客中,我们将深入探讨linear-gradient函数中的百分比值,特别是像#C3002F 50%, #e8e8e8 0这样的用法,以及它们如何影响渐变效果。 什么是linear-g

QPainter 画笔(QPen)和画刷(QBrush)

Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕上和绘图·设备上进行绘制,主要基于QPainter、QPainterDevice和QPainterEngine这3个类。QPainter执行绘图操作,QPainterDevice提供绘图设备,是一个二维空间的抽象,QPainterEngine提供一些接口。QPainter可以绘制一切简单的图形,从简单的一条直线到任何复杂的图形。QPaint

安卓之ViewFlipper实现渐变视差导航页

前言 以前的导航页总是使用viewPager配套fragment来实现的,某天一个妹子说其实导航页也可以使用ViewFilpper 来实现,哈哈确实不错,前段时间就用ViewFilpper 实现了京东快报,然后呢那时候对ViewFilpper 也随便了解了下,不过那个直接是xml实现的,这里不表了,接着看今天实现的渐变视差导航页。 ViewFilpper ViewFilpper 是Andro

canvas(3)阴影和渐变

(1)阴影 var drawing = document.getElementById('drawing');if(drawing.getContext){//获取绘图的上下文var context = drawing.getContext('2d');//设置阴影context.shadowOffsetX = 5;context.shadowOffsetY = 5;context.

自定义颜色、大小渐变的圆点指示器

源码 点击打开链接 首先看布局文件activity_main.xml 布局很简单只有装图片的ViewPager--以及自定义的圆点指示器 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"an

css设置让整个盒子的内容渐变透明(非颜色渐变透明)

css设置让整个盒子的内容渐变透明(非颜色渐变透明) 效果核心css代码 效果 核心css代码 /* 设置蒙版上下左右渐变显示 */mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 1

linear-gradient 渐变

CSS3 Gradient 分为  linear-gradient(线性渐变)和  radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等)、WebKit(Safari、Chrome等)、Opera(Opera浏览器

CSS-径向渐变【看这一篇就够了!!!】

目录 线性渐变 未设置角度,默认从上向下渐变 关键字指定渐变方向 用度数来指定渐变方向 多个颜色值,并且可以用百分数定义它出现的位置 自定义转换中点 浏览器私有前缀  渐变色工具 径向渐变 简单的径向渐变 设置颜色节点出现的位置 设置径向渐变的形状shape 指定径向渐变中心位置position 指定不同尺寸大小size 椭圆时径向渐变 圆形时径向渐变 使用径向渐