利用QtGraphicalEffects来使得自己的图像显示更加生动
2015-07-06 11:21
267 查看
有兴趣的开发者可以参阅连接http://doc.qt.io/qt-5/qtgraphicaleffects-qmlmodule.html来深度学习Qt对Graphics方面的处理。在今天的这篇文章中,我们来使用OpacityMask做一个小小的例子来抛砖引玉看看Qt对我们的图像的处理。具体的例子在Qt的官方网站上可以看到。由于一些原因,在官方网站上下载的例程中的文件并不能被使用,需要做一些的处理才可以。
下面,我们直接来把我们的例子展示给大家:
在这里,我们使用了Image来展示图片,但是,他们并不是可见的(visible = false)。我们可以通过一个掩膜mask,在mask上值为非透明的地方可以显示出图像。可以通过OpacityMask来使得它们可以显示。
我们的mask图片bufferfly.png如下:
![](http://img.blog.csdn.net/20150706111622584?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
bug.png的原图为:
![](http://img.blog.csdn.net/20150706111756072?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
运行我们的例程,效果图如下:
![](http://img.blog.csdn.net/20150706111813917?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20150706111831215?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
源码在: https://github.com/liu-xiao-guo/mask
下面,我们直接来把我们的例子展示给大家:
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的原图为:
运行我们的例程,效果图如下:
源码在: https://github.com/liu-xiao-guo/mask
相关文章推荐
- 跨浏览器用javascript获取窗口的位置和大小
- PHP伪造来源HTTP_REFERER的方法实例详解
- JavaScript灵活性
- JavaScript灵活性
- 用html5模拟的汉诺塔
- 图解Javascript上下文与作用域
- 一些达成共识的JavaScript编码风格约定
- CSS学习笔记(记录一些小技巧)
- leetcode Populating Next Right Pointers in Each Node 树 队列应用
- JSTL(fn函数)
- H5大会之后,未来指向何方?
- css笔记08:id选择器之父子选择器
- jquery的ajax同步和异步
- Jsonp post 跨域方案
- css中的颜色及长度
- HTML5实现IP Camera网页输出 分类: HTML5 2015-07-06 10:56 262人阅读 评论(0) 收藏
- Google JavaScript代码风格指南
- Jquery Ajax案例
- Javascript 删除数组的指定元素
- Web前端_jQuery_命名空间