简述
QGradient 可以和 QBrush 组合使用,来指定渐变填充。
Qt 目前支持三种类型的渐变填充:
- QLinearGradient:显示从起点到终点的渐变
- QRadialGradient:以圆心为中心显示渐变
- QConicalGradient:围绕一个中心点显示渐变
渐变类型可以使用 type() 函数来检索,类型中的每一个都是 QGradient 的子类。
| 版权声明:一去、二三里,未经博主允许不得转载。
渐变类型
QLinearGradient | QRadialGradient | QConicalGradient |
---|---|---|
使用 QGradientStop 类来描述渐变中过渡点的位置和颜色。例如:一个位置和一个颜色。使用 setColorAt() 函数来定义一个过渡点。或者,使用 setStops() 函数来一次定义多个过渡点。需要注意的是,后者的功能将替换当前设置的过渡点。
这是渐变的一套完整的过渡点(通过 stops() 来访问)描述渐变区域如何被填充。如果没有指定任何过渡点,那么将会从 0 点(黑色)渐变为 1 点(白色)。
QLinearGradient
QLinearGradient 显示从起点到终点的渐变。
QGradient::PadSpread | QGradient::RepeatSpread | QGradient::ReflectSpread |
---|---|---|
<span style="color:#000000"><code class="language-Qt">void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
<span style="color:#880000 !important"><em>// 反走样</em></span>
painter.setRenderHint(QPainter::Antialiasing, true);
<span style="color:#880000 !important"><em>// 设置渐变色</em></span>
QLinearGradient linear(QPointF(<span style="color:#006666 !important">80</span>, <span style="color:#006666 !important">80</span>), QPointF(<span style="color:#006666 !important">150</span>, <span style="color:#006666 !important">150</span>));
linear.setColorAt(0, Qt::black);
linear.setColorAt(1, Qt::white);
<span style="color:#880000 !important"><em>// 设置显示模式</em></span>
linear.setSpread(QGradient::PadSpread);
<span style="color:#880000 !important"><em>// 设置画笔颜色、宽度</em></span>
painter.setPen(QPen(QColor(<span style="color:#006666 !important">0</span>, <span style="color:#006666 !important">160</span>, <span style="color:#006666 !important">230</span>), <span style="color:#006666 !important">2</span>));
<span style="color:#880000 !important"><em>// 设置画刷填充</em></span>
painter.setBrush(linear);
<span style="color:#880000 !important"><em>// 绘制椭圆</em></span>
painter.drawRect(QRect(<span style="color:#006666 !important">40</span>, <span style="color:#006666 !important">40</span>, <span style="color:#006666 !important">180</span>, <span style="color:#006666 !important">180</span>));
}</code></span>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
QLinearGradient 构造函数的第一个参数指定起点,第二个参数指定终点,然后显示渐变。函数setColorAt() 用于设置起点和终点之间要显示的颜色,setSpread() 可以设置起点和终点区域之外的显示模式。
QRadialGradient
QRadialGradient 类以圆心为中心显示渐变。(cx, cy) 是中点,半径(radius)是以中点为圆心的圆的半径,(fx, fy) 是渐变的起点。
QGradient::PadSpread | QGradient::RepeatSpread | QGradient::ReflectSpread |
---|---|---|
<span style="color:#000000"><code class="language-Qt">void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
<span style="color:#880000 !important"><em>// 反走样</em></span>
painter.setRenderHint(QPainter::Antialiasing, true);
<span style="color:#880000 !important"><em>// 设置渐变色</em></span>
QRadialGradient radial(<span style="color:#006666 !important">110</span>, <span style="color:#006666 !important">110</span>, <span style="color:#006666 !important">50</span>, <span style="color:#006666 !important">130</span>, <span style="color:#006666 !important">130</span>);
radial.setColorAt(0, Qt::black);
radial.setColorAt(1, Qt::white);
<span style="color:#880000 !important"><em>// 设置显示模式</em></span>
radial.setSpread(QGradient::ReflectSpread );
<span style="color:#880000 !important"><em>// 设置画笔颜色、宽度</em></span>
painter.setPen(QPen(QColor(<span style="color:#006666 !important">0</span>, <span style="color:#006666 !important">160</span>, <span style="color:#006666 !important">230</span>), <span style="color:#006666 !important">2</span>));
<span style="color:#880000 !important"><em>// 设置画刷填充</em></span>
painter.setBrush(radial);
<span style="color:#880000 !important"><em>// 绘制椭圆</em></span>
painter.drawRect(QRect(<span style="color:#006666 !important">40</span>, <span style="color:#006666 !important">40</span>, <span style="color:#006666 !important">180</span>, <span style="color:#006666 !important">180</span>));
}</code></span>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
QRadialGradient 构造函数的第一个参数和第二个参数是 (cx, cy) 坐标,第三个参数是半径,第四个和第五个参数是 (fx, fy) 坐标。
QConicalGradient
QConicalGradient 在 (cx, cy) 坐标上以角度 (angle) 为中心显示渐变。
<span style="color:#000000"><code class="language-Qt">void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
<span style="color:#880000 !important"><em>// 反走样</em></span>
painter.setRenderHint(QPainter::Antialiasing, true);
<span style="color:#880000 !important"><em>// 设置渐变色</em></span>
QConicalGradient conical(<span style="color:#006666 !important">110</span>, <span style="color:#006666 !important">110</span>, <span style="color:#006666 !important">45</span>);
conical.setColorAt(0, Qt::black);
conical.setColorAt(1, Qt::white);
<span style="color:#880000 !important"><em>// 设置画笔颜色、宽度</em></span>
painter.setPen(QPen(QColor(<span style="color:#006666 !important">0</span>, <span style="color:#006666 !important">160</span>, <span style="color:#006666 !important">230</span>), <span style="color:#006666 !important">2</span>));
<span style="color:#880000 !important"><em>// 设置画刷填充</em></span>
painter.setBrush(conical);
<span style="color:#880000 !important"><em>// 绘制椭圆</em></span>
painter.drawRect(QRect(<span style="color:#006666 !important">40</span>, <span style="color:#006666 !important">40</span>, <span style="color:#006666 !important">180</span>, <span style="color:#006666 !important">180</span>));
}</code></span>