效果

下图是我设计的示例效果：

图 1 渐变图形效果

如图所示，第一行为线性渐变，第二行为锥形渐变，第三行为径向渐变。

渐变元素与其他图形效果元素不同之处在于：渐变元素既可以用来改变一个已有的元素（如Image），也有可以独立使用。如你在示例效果图中看到的那样，每一行前两个是独立使用渐变元素的效果，后两个是讲渐变效果应用到其它元素上的效果。

源码

渐变效果较为简单，所有的示例都放在一个 qml 文档—— GradientExample.qml ——中，内容如下：

import QtQuick 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.2Rectangle {id: example;anchors.fill: parent;signal back();Button {anchors.right: parent.right;anchors.top: parent.top;anchors.margins: 4;text: "Back";onClicked: example.back();}Text {id: linearLabel;anchors.left: parent.left;anchors.top: parent.top;anchors.margins: 4;text: "LinearGradient";font.bold: true;}Row {id: linears;anchors.left: parent.left;anchors.top: linearLabel.bottom;anchors.margins: 4;spacing: 8;LinearGradient {width: 100;height: 180;gradient: Gradient {GradientStop{ position: 0.0; color: "#80222222";}GradientStop{ position: 0.9; color: "#FFFFFFFF";}}start: Qt.point(0, 0);end: Qt.point(0, 180);}LinearGradient {width: 100;height: 180;gradient: Gradient {GradientStop{ position: 0.0; color: "#FFFF0000";}GradientStop{ position: 0.3; color: "#FFFFA000";}GradientStop{ position: 0.5; color: "#A0FF4000";}GradientStop{ position: 1.0; color: "#FF800FFF";}}start: Qt.point(0, 0);end: Qt.point(80, 180);}Image {id: butterfly;source: "butterfly.png";width: 180;height: 180;smooth: true;sourceSize: Qt.size(180, 180);}LinearGradient {source: butterfly;width: 180;height: 180;gradient: Gradient {GradientStop{ position: 0.0; color: "#222222";}GradientStop{ position: 0.9; color: "#F8884F";}}start: Qt.point(0, 0);end: Qt.point(180, 180);}}Text {id: conicalLabel;anchors.left: parent.left;anchors.top: linears.bottom;anchors.margins: 4;text: "ConicalGradient";font.bold: true;}Row {id: conicals;anchors.left: parent.left;anchors.top: conicalLabel.bottom;anchors.margins: 4;spacing: 8;ConicalGradient {width: 100;height: 180;angle: 45;gradient: Gradient {GradientStop{ position: 0.0; color: "#80222222";}GradientStop{ position: 0.9; color: "#FFFFFFFF";}}}ConicalGradient {width: 100;height: 180;gradient: Gradient {GradientStop{ position: 0.0; color: "#FFFF0000";}GradientStop{ position: 0.3; color: "#FFFFA000";}GradientStop{ position: 0.5; color: "#A0FF4000";}GradientStop{ position: 1.0; color: "#FF800FFF";}}horizontalOffset: 20;verticalOffset: 40;}Image {id: conicalOrig;source: "butterfly.png";width: 180;height: 180;smooth: true;sourceSize: Qt.size(180, 180);}ConicalGradient {source: conicalOrig;width: 180;height: 180;angle: 60;gradient: Gradient {GradientStop{ position: 0.0; color: "#A22222";}GradientStop{ position: 0.9; color: "#2888F4";}}}}Text {id: radialLabel;anchors.left: parent.left;anchors.top: conicals.bottom;anchors.margins: 4;text: "RadialGradient";font.bold: true;}Row {id: radials;anchors.left: parent.left;anchors.top: radialLabel.bottom;anchors.margins: 4;spacing: 8;RadialGradient {width: 100;height: 180;angle: 60;horizontalRadius: 50;verticalRadius: 90;gradient: Gradient {GradientStop{ position: 0.0; color: "#222222";}GradientStop{ position: 0.9; color: "#00FF0F";}}}RadialGradient {width: 100;height: 180;gradient: Gradient {GradientStop{ position: 0.0; color: "#FFFF0000";}GradientStop{ position: 0.3; color: "#FFFFA000";}GradientStop{ position: 0.5; color: "#A0FF4000";}GradientStop{ position: 1.0; color: "#FF800FFF";}}horizontalOffset: 20;horizontalRadius: 40;verticalRadius: 40;verticalOffset: 40;}Image {id: radialOrig;source: "butterfly.png";width: 180;height: 180;smooth: true;sourceSize: Qt.size(180, 180);}RadialGradient {source: radialOrig;width: 180;height: 180;angle: 120;horizontalRadius: 40;verticalRadius: 80;gradient: Gradient {GradientStop{ position: 0.0; color: "#A22222";}GradientStop{ position: 1.0; color: "#2888F4";}}}}
}

GradientExample.qml 会被示例框架（参看 Qt Quick里的图形效果（Graphical Effects））动态加载，它使用了三个 Row 定位器来布局每个小示例。下面我们简单介绍一下每种渐变元素。

LinearGradient

线性渐变元素（LinearGradient）有下列属性：

cached ，布尔值，指示是否缓存
start ，指定渐变开始的位置，与 end 配合，类型都是 point ，可以使用 Qt.point() 方法为其赋值，或者使用 "x,y" 这种字符串形式为其赋值，如 "0, 180" ，等价于 Qt.point(0, 180)
end ，指定渐变结束的位置，与 start 配合
gradient ，Gradient 类型的值，指定渐变色。Gradient 类用来定义一个渐变色，它只有一个属性 stops ，是列表属性，列表内的对象类型为 GradientStop 。GradientStop 假设渐变的路径从0.0开始到1.0结束，它有两个属性，一个是 position ，指定渐变路径上的某个点，另一个属性 color 指定这个点上的颜色。一个 Gradient 可以包含多个 GradientStop 。
source ，这个属性指定渐变元素要应用的来源元素，比如你要用渐变改变一张图片，就指定 source 为图片对象（Image）的 id 即可。如果你不指定，那渐变元素就自个用渐变色绘制一个图元。

有了上面的介绍，再来看示例：

        LinearGradient {width: 100;height: 180;gradient: Gradient {GradientStop{ position: 0.0; color: "#80222222";}GradientStop{ position: 0.9; color: "#FFFFFFFF";}}start: Qt.point(0, 0);end: Qt.point(0, 180) ;}

LinearGradient 是 Item 的派生类，我设置了它从 Item 继承来的属性 width 和 height ，其它属性都介绍过了，对照着看看就明白了，效果就是图 1 中第一行左面那个图了。

下面的代码则是为 source 属性指定了一个 Image 对象：

        Image {id: butterfly;source: "butterfly.png";width: 180;height: 180;smooth: true;sourceSize: Qt.size(180, 180);}LinearGradient {source: butterfly;width: 180;height: 180;gradient: Gradient {GradientStop{ position: 0.0; color: "#222222";}GradientStop{ position: 0.9; color: "#F8884F";}}start: Qt.point(0, 0);end: Qt.point(180, 180);}

如你所见，我们使用 Image 来显示一个图片： butterfly.png 。使用 LinearGradient 来生成一个叠加了渐变效果的新元素。这是需要注意的哦，当我们为 LinearGradient 指定了 source 属性时，Qt Quick会在 source 指定的元素上应用渐变效果，生成一个新的元素，而原对象不会被改变。

ConicalGradient

锥形渐变（ConicalGradient）有下列属性：

angle ，real 类型，指定渐变的起始角度，注意是度，45°，180°之类的，不是弧度哦。 Gradient 属性里的渐变起始点 0.0 处的颜色与这个角度对应。应用渐变时按照顺时针方向，随着角度变大，Gradient里的颜色也向着 1.0 这个位置变化。
cached ，不说了
gradient ，不说了
horizontalOffset ，real类型，偏离中心点的水平偏移量
verticalOffset ，real类型，偏离中心点的垂直偏移量
source ，不说了，与 LinearGradient 的 source 属性含义一样

RadialGradient

RadialGradient 是渐变元素里最复杂的了，有下列属性：

angle ，指定渐变相对于中心点的旋转角度，注意啊，这个和 ConicalGradient 的 angle 属性的含义不同哦。
cached ，略
gradient ，略
horizontalOffset ， real类型，与 ConicalGradient 的同名属性含义类似
verticalOffset ，与 ConicalGradient 的同名属性含义类似
horizontalRadius ，real类型，指定水平方向的半径，
verticalRadius ， real类型，指定垂直方向的半径，与 horizontalRadius 结合，就定义了一个椭圆了。
source ，略

好吧，结合前面的完整示例代码来看吧，不说了。

--------

回顾一下我的Qt Quick系列文章：

Qt Quick 简介
QML 语言基础
Qt Quick 之 Hello World 图文详解
Qt Quick 简单教程
Qt Quick 事件处理之信号与槽
Qt Quick事件处理之鼠标、键盘、定时器
Qt Quick 事件处理之捏拉缩放与旋转
Qt Quick 组件与对象动态创建详解
Qt Quick 布局介绍
Qt Quick 之 QML 与 C++ 混合编程详解
Qt Quick 图像处理实例之美图秀秀（附源码下载）
Qt Quick 之 PathView 详解
Qt Quick实例之挖头像
Qt Quick综合实例之文件查看器
Qt Quick调试之显示代码行号
Qt Quick实现的涂鸦程序
Qt Quick播放GIF动画
Qt Quick 中的 drag and drop（拖放）
Qt Quick里的AnimatedSprite的用法
Qt Quick里的粒子系统
Qt Quick实现的疯狂算数游戏
Qt Quick里的图形效果——混合（Blend）
Qt Quick里的图形效果——颜色（Color）

Qt Quick里的图形效果——渐变（Gradient）相关推荐

Qt Quick里的图形效果——颜色（Color）
Qt Quick提供了通过改变一个 Item 的颜色来产生各种各样效果的元素.有下面几种: BrightnessContrast,调整亮度和对比度 ColorOverlay,在源 Item 上覆盖一层 ...
Qt Quick实现的涂鸦程序
之前一直以为 Qt Quick 里 Canvas 才可以自绘,后来发觉不是,原来还有好几种方式都可以绘图!可以使用原始的 OpenGL(Qt Quick 使用 OpenGL 渲染),可以构造QSGNo ...
Qt Quick实现的疯狂算数游戏
使用 Qt Quick 写了个小游戏:疯狂算数.支持 Windows 和 Android 两个平台. 游戏简单,但牵涉到下面你的 Qt Quick 主题: 自己实现一个按钮自适应分辨率国际化 QM ...
Qt Quick 4小时入门-安晓辉-专题视频课程
Qt Quick 4小时入门-39905人已学习课程介绍 Qt Quick(QML)是Qt 5里推荐的UI开发框架,能够为各种设备搭建流畅且绚丽的用户界面.本课程删繁就简,精心选择主 ...
QT Quick Qml 实例——滑块拖动颜色框的平移(Gradient、drag、clip、transform、antialiasing)
<实例--滑块拖动颜色框的平移> 1. 简介 2. 详解所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧! QML其它文章请点击这里: QT QUICK QM ...
Qt 3D教程（四）结合Qt Quick来实现动画的效果
Qt 3D教程(四)结合Qt Quick来实现动画的效果上篇教程已经给大家带来较为实用的效果了,这回我们尝试载入两个模型,并且让PhongMaterial成为它们的共享材质,此外,我们通过借助Qt ...
Qt Quick 简单教程
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 上一篇& ...
Qt Quick QML
Qt Quick简介 Qt Quick是一个用于帮助开发者设计直观,现代,流畅的用户界面的技术集,近年来被广泛应用于手机,媒体播放器,机顶盒和其他手提设备.Qt Quick中包含了大量的用户界面元素, ...
Qt 5.12 LTS(长期维护版本)中Qt Quick的性能改进
我们一直致力于提高Qt的性能和优化其内存消耗.Qt 5.12的一个重点关注是在于减少QML引擎的内存消耗和优化JavaScript性能. 与上一个长期支持版Qt 5.6 LTS相比,Qt 5.9 LT ...

Qt Quick里的图形效果——渐变（Gradient）

效果

源码

LinearGradient

ConicalGradient

RadialGradient

Qt Quick里的图形效果——渐变（Gradient）相关推荐

最新文章

热门文章