利用QtGraphicalEffects来使得自己的图像显示更加生动

有兴趣的开发者可以参阅连接来深度学习Qt对Graphics方面的处理。在今天的这篇文章中，我们来使用OpacityMask做一点小小的例子来抛砖引玉看看Qt对我们的图像的处理。具体的例子在Qt的官方网站上可以看到。由于一些原因，在官方网站上下载的例程中的文件并不能被使用，需要做一些的处理才可以。

下面，我们直接来把我们的例子展示给大家：

import QtQuick 2.0import Ubuntu.Components 1.1import 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 manifestapplicationName: "mask.liu-xiao-guo"/*This property enables the application to change orientationwhen the device is rotated. The default is false.*///automaticOrientation: true// Removes the old toolbar and enables new features of the new header.useDeprecatedToolbar: falsewidth: units.gu(60)height: units.gu(85)Page {title: i18n.tr("mask")Flickable {anchors.fill: parentcontentHeight: mypics.childrenRect.heightItem {id: mypicswidth: parent.widthheight: units.gu(80)Image {id: bugheight: parent.height/2width: heightsource: "images/bug.png"sourceSize: Qt.size(parent.width, parent.height)smooth: truevisible: false}Image {id: bug1height: parent.height/2width: heightsource: "images/bug.png"anchors.top: bug.bottomanchors.topMargin: units.gu(1)sourceSize: Qt.size(parent.width, parent.height)smooth: truevisible: false}Rectangle {id: maskanchors.margins: 10width: 65height: 65color: "black"radius: width/2clip: truevisible: false}Image {id: mask1height: units.gu(40)width: heightsource: "images/bufferfly.png"sourceSize: Qt.size(parent.width, parent.height)smooth: truevisible: false}OpacityMask {anchors.fill: bugsource: bugmaskSource: mask}OpacityMask {anchors.fill: bug1source: bugmaskSource: mask1}}}}}在这里，我们使用了Image来展示图片，，但是，他们并不是可见的（visible = false）。我们可以通过一个掩膜mask，在它定义部位透明颜色的地方可以通过OpacityMask来使得它们可以显示。

我们的mask图片bufferfly.png如下：

bug.png的原图为：

运行我们的例程，效果图如下：

源码在： git clonehttps://gitcafe.com/ubuntu/mask.git

路遥知马力，日久见人心。

相关文章：

你感兴趣的文章：

标签云：