Back to Blog home

Qt实验室中的Qt图像特效

Published on Sunday February 26, 2012 by Zhen Zeng in OpenGL qt quick qt-labs-chinese | Comments

原文链接 Sami LehtonenQt Graphical Effects in Qt Labs

引言

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

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

包含的特效

http://d33763z96x0wep.cloudfront.net/wp-content/uploads/2012/02/effects.jpg

特效的使用

对于开发人员和设计人员而言,只用了解基础的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查看文档。

http://d33763z96x0wep.cloudfront.net/wp-content/uploads/2012/02/documentation.jpg

实现细节

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

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.