qt qml fuzzyPanel 毛玻璃效果

毛玻璃效果,用qml来写代码真是简短,大爱qml:)

【下载地址】http://download.csdn.net/detail/surfsky/8426641

【核心代码】

 1 Rectangle{
 2     clip: true
 3
 4     // 属性
 5     property Item target  // 模糊源
 6
 7     // 毛玻璃效果
 8     FastBlur {
 9         id: blur
10         source: parent.target
11         width: source.width;
12         height: source.height
13         radius: 64
14     }
15
16     // 设置模糊组件的位置
17     onXChanged: setBlurPosition();
18     onYChanged: setBlurPosition();
19     Component.onCompleted: setBlurPosition();
20     function setBlurPosition(){
21         blur.x = target.x - x;
22         blur.y = target.y - y;
23     }
24 }

【调用方法】

1     FuzzyPanel{
2         id: panel
3         width: 200;
4         height: 200;
5         x: 200
6         y: 200
7         target: panelBg
8     }

【效果图】

 

时间: 2024-10-17 08:37:41

qt qml fuzzyPanel 毛玻璃效果的相关文章

qt qml中PropertyAnimation的几种使用方法

qml文章 qt qml中PropertyAnimation的几种使用方法 动画应用场景有以下几种: 首先如果一个Rectangle.动画是要改变它的x和y值 1,Rectangle一旦被创建,就要移动到一个特定的位置 2,动画仅仅有在某一个特定的外部行为触发时候才会被触发,比如,鼠标单击某一个控件时候,产生动画.使目标移动到指定的位置 3,仅仅有在某一个特定的信号后才触发 4,做为一个独立的动画,尽管没有绑定rectangle的运动,可是能够在脚本中载入,開始和停止 5.仅仅有在状态改变时候才

Qt qml listview 下拉刷新上拉分页控件

Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) [先看效果]    [功能] 1 下拉刷新和上拉分页逻辑 2 /下拉刷新 3 /上拉更多 4 /滚动栏 5 /工具栏半拉显隐 6 Author: surfsky.cnblogs.com 7 Lisence: MIT 请保留此文档声明 8 History: 9 init. surfsky.cnblogs.com, 2015-01 10 a

Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)

Qt qml中listview 列表视图控件(下拉刷新.上拉分页.滚动轴) 来源 https://www.cnblogs.com/surfsky/p/4352898.html 设置ListView涉及到将contentsY,即视图的可见部分的顶部,设置y为委托的值.另一个更改是interactive将视图设置为false.这样可以防止视图移动.用户不能再滚动列表或更改当前Item. contentY为列表上拉后列表左上角点距显示框左上解点的高度listView1.height为可显示部分的高度,

移动端UI设计越来越流行的高斯模糊(Gaussian blur)和毛玻璃效果(磨砂效果),如何使用Android RenderScript简单实现?

高斯模糊(Gaussian blur)和毛玻璃效果(亦称磨砂效果),近两年在移动端的UI设计上越来越流行,特别是iOS手机上出现的较多,iOS系统也提供了相应的API帮助开发人员分分钟实现这两个效果.而Android系统则经历了一个漫长的探索过程,对图片的处理,从Java算法到NDK方式实现等,各种摸索层出不穷. 值得欣慰的是,Google终于在API 11中引入了 RenderScript ,一个强大的图片处理框架,帮助Android开发人员专注于图片处理算法而不是API的调度工作.使用Ren

Android高斯模糊技术,实现毛玻璃效果(转)

本博客转自郭霖公众号:http://mp.weixin.qq.com/s?__biz=MzA5MzI3NjE2MA==&mid=2650235930&idx=1&sn=e328709c41ae208a9e41ef79d38cbeed&scene=24&srcid=09104fpQDG98JcRcUB9Ec7BN#wechat_redirect http://blog.csdn.net/grp0916/article/details/50494712 Android高

用swing实现了io7的毛玻璃效果

话不多说,上图 我new 了一些按钮,每个按钮的位置和背景颜色是随机的,其中有一些按钮的背景色每隔一秒变一次,拖动顶层panel,panel下的所有控件都将会模糊,而且是实时和动态的,比如下图,按钮为选择状态 panel背后的有些按钮在实时的变色,同样可以及时的模糊,模糊效果在很多应用上可以使用,模糊的背景能减弱视觉疲劳,还可以吸引用户的注意力. 源码地址:http://download.csdn.net/detail/lw421058391/7731725 用swing实现了io7的毛玻璃效果

CSS遮罩效果和毛玻璃效果

前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: 0;right: 0;left: 0;bottom: 0; background:rgba(0,0,0,0.8); } .lightbox{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; margin:auto; z-index:1; width

用css使图片产生毛玻璃效果

毛玻璃的图片效果,使得其显示更加唯美,用户体验更佳,所以在手机端电脑端应用甚广 比如ios系统: 所以现在我们就来看看毛玻璃效果的实现方法吧: 首先这是html的主要内容: <div class="container"> <div class="mat_class"></div> <p class="word">SHOW TIME</p> </div> 这里container

毛玻璃效果简单实现

项目中需要运用到毛玻璃的效果.经过搜索查阅,踩了一些坑,找到了一条暂时可行的办法. 其中,核心的控件是使用RenderScript这个类,这个类属于jni类,在较低版本的Android系统中,是不具备它的相关方法的.所以我们只能使用support.v8里面的类.然而,support.v8并没有默认地放在新建工程中,因此我们需要自己去添加. 第一步:将D:\AndroidSdk\build-tools\23.0.1\renderscript\lib\packaged 目录下的armeabi-v7a