利用QtGraphicalEffects来使得自己的图像显示更加生动
2017-04-28 18:03 tlnshuju 阅读(1437) 评论(0) 编辑 收藏 举报有兴趣的开发人员能够參阅连接http://doc.qt.io/qt-5/qtgraphicaleffects-qmlmodule.html来深度学习Qt对Graphics方面的处理。
在今天的这篇文章中。我们来使用OpacityMask做一个小小的样例来抛砖引玉看看Qt对我们的图像的处理。
详细的样例在Qt的官方站点上能够看到。因为一些原因,在官方站点上下载的例程中的文件并不能被使用,须要做一些的处理才干够。
以下,我们直接来把我们的样例展示给大家:
import QtQuick 2.0 import Ubuntu.Components 1.1 import QtGraphicalEffects 1.0 /*! \brief MainView with a Label and Button elements. */ MainView { // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "mask.liu-xiao-guo" /* This property enables the application to change orientation when the device is rotated. The default is false. */ //automaticOrientation: true // Removes the old toolbar and enables new features of the new header. useDeprecatedToolbar: false width: units.gu(60) height: units.gu(85) Page { title: i18n.tr("mask") Flickable { anchors.fill: parent contentHeight: mypics.childrenRect.height Item { id: mypics width: parent.width height: units.gu(80) Image { id: bug height: parent.height/2 width: height source: "images/bug.png" sourceSize: Qt.size(parent.width, parent.height) smooth: true visible: false } Image { id: bug1 height: parent.height/2 width: height source: "images/bug.png" anchors.top: bug.bottom anchors.topMargin: units.gu(1) sourceSize: Qt.size(parent.width, parent.height) smooth: true visible: false } Rectangle { id: mask anchors.margins: 10 width: 65 height: 65 color: "black" radius: width/2 clip: true visible: false } Image { id: mask1 height: units.gu(40) width: height source: "images/bufferfly.png" sourceSize: Qt.size(parent.width, parent.height) smooth: true visible: false } OpacityMask { anchors.fill: bug source: bug maskSource: mask } OpacityMask { anchors.fill: bug1 source: bug maskSource: mask1 } } } } }
在这里。我们使用了Image来展示图片,可是。他们并非可见的(visible = false)。我们能够通过一个掩膜mask,在mask上值为非透明的地方能够显示出图像。
能够通过OpacityMask来使得它们能够显示。
我们的mask图片bufferfly.png例如以下:
bug.png的原图为:
执行我们的例程,效果图例如以下: