分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
Qt Quick提供了三种渐变图形效果:
- ConicalGradient,锥形渐变
- LinearGradient,线性渐变
- RadialGradient,径向渐变
效果
下图是我设计的示例效果:
图 1 渐变图形效果
如图所示,第一行为线性渐变,第二行为锥形渐变,第三行为径向渐变。
渐变元素与其他图形效果元素不同之处在于:渐变元素既可以用来改变一个已有的元素(如Image),也有可以独立使用。如你在示例效果图中看到的那样,每一行前两个是独立使用渐变元素的效果,后两个是讲渐变效果应用到其它元素上的效果。
源码
渐变效果较为简单,所有的示例都放在一个 qml 文档—— GradientExample.qml ——中,内容如下:
import QtQuick 2.2import QtGraphicalEffects 1.0import 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; so