Qt实验室中的Qt图像特效

原文链接 Sami Lehtonen – Qt Graphical Effects in Qt Labs

引言

Qt图像特效项目是为Qt Quick 2.0 提供一组中性的虚拟效果的支持。

目前有超过20种现成可用的QML图形效果元素，涵盖了混合、蒙板、模糊、色彩等多种效果。元素仍然有提升与扩展的空间—欢迎提出任何想法、意见与建议，甚至提供实际的贡献！

包含的特效

特效的使用

对于开发人员和设计人员而言，只用了解基础的Qt Quick/QML就能够爽快地上手这些图形效果元素。

任意QML Item元素都能作为特效的源元素。下面是一个例子，给一张图片添加一个下阴影：

import QtQuick 2.0

import QtGraphicalEffects 1.0
Item {

    width: 300

    height: 300
    Rectangle {

        id: background

        anchors.fill: parent

    }
    Image {

        id: butterfly

        source: "images/butterfly.png"

        sourceSize: Qt.size(parent.width, parent.height)

        smooth: true

        visible: false

    }
    DropShadow {

        anchors.fill: butterfly

        horizontalOffset: 3

        verticalOffset: 3

        radius: 8.0

        samples: 16

        color: "#80000000"

        source: butterfly

    }

}

使用入门

获取并编译Qt5: http://developer.qt.nokia.com/wiki/Building_Qt_5_from_Git

确认系统路径中有qtbase/bin并且QTDIR指向/qtbase

获取并编译Qt图像特效模块: https://qt.gitorious.org/qt-labs/qtgraphicaleffects

git clone git@gitorious.org:qt-labs/qtgraphicaleffects.git

cd qtgraphicaleffects

qmake

make install

为了看到实际的效果，在图像特效下面的doc/src/snippets文件夹运行例子代码：

qmlscene doc/src/snippets/DropShadow-example.qml

或者直接运行测试程序：

qmlscene tests/manual/testbed/testBed.qml

测试程序可以方便地在不同特效与其属性之间浏览，并可以模拟显示效果。在左侧选择一种特效，在右侧修改其属性，结果会实时的在正中显示出来：

<

(译者注：这段视频放在YouTube，可能某些地区的朋友看不到)

API与文档

每种特效的API是一组QML属性。特效属性能像其他QML属性一样动画化。文档里面包含了属性的描述与基本使用的例子。在qtgraphicaleffects项目目录下执行以下命令来生成文档：

qmake

make docs

在浏览器中打开生成的doc/html/qml-graphicaleffects-index.html查看文档。

实现细节

QML阴影特效是Qt Quick 2.0的内置元素。这个强大的QML元素允许OpenGL着色语言(GLSL)与QML的结合，因而可以容易的实现令人视觉上映像深刻的定制效果。在这之下，项目所有的特效都是基于阴影效果组件的。仅仅使用了QML与GLSL，没有其它额外的C++ API。如果对GLSL很熟悉，则可以非常简单的了解这些特效是如何实现的。然后就可以通过修改、绑定基础效果来定制新特效。

相关博客与规范的连接

> The convenient power of QML Scene Graph
> QML Scene Graph in Master
> OpenGL Shading Language specification
> OpenGL ES Shading Language specification