码迷,mamicode.com
首页 > 其他好文 > 详细

Qt Quick里的图形效果——渐变(Gradient)

时间:2015-01-28 07:23:22      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:qt quick   qml   图形效果   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里的图形效果——渐变(Gradient)

标签:qt quick   qml   图形效果   gradient   

原文地址:http://blog.csdn.net/foruok/article/details/43225263

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!