效果

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

技术分享

图 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）

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

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Qt Quick里的图形效果——渐变（Gradient）

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

效果

源码

LinearGradient

ConicalGradient

RadialGradient

看完仍有疑问？有类似问题直接问程序猿