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

    Qt Quick提供了三种渐变图形效果：

• ConicalGradient，锥形渐变
• LinearGradient，线性渐变
• RadialGradient，径向渐变

效果

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

                               图 1 渐变图形效果

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

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

源码

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

import QtQuick 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.2

Rectangle {
    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）