CN106557154A - 一种实现手指触摸区域羽化透明效果的方法 - Google Patents

Abstract

本发明提供一种实现手指触摸区域羽化透明效果的方法，包括：在客户端建立并显示一个视图View，在视图显示区域设置分上下两层图层，下层图层显示视图中物体，上层是模糊的区域遮盖住下层图层；在手指触摸区域渲染触摸区域的颜色，使触摸区域透明设置在视图上层；设置触摸监听OnTouch事件，监听手指触摸的范围，获取手指先后触摸的坐标old_X,old_Y,new_X,new_Y，计算出手指触摸区域的宽高width，height,获得手指触摸区域的面积S；渲染S面积的颜色使其透明，显示视图下层；手指离开触摸区域后，重新初始化视图View。实施本发明的技术方案的有益效果是为了提高图片认知、学习的趣味性，照片分享的互动性，提高技术所指代的产品更好的用户体验度。

Description

一种实现手指触摸区域羽化透明效果的方法

技术领域

本发明属于移动终端中的应用技术领域，特别是一种实现手指触摸区域羽化透明效果的方法。

背景技术

随着电子技术的发展，电子产品更新速度越来越快，各种智能终端设备越来越多被用于人们的生活和工作中，这些终端可以用来作为娱乐的工具，也可以用于学习和认知等。

特别是移动客户端，如手机、平板电脑的出现和发展，各式各样的应用层出不穷，特别是一些学习兼有娱乐功能的应用的出现，是为了取悦消费者以期待其购买产品，特别是多媒体教学以及家庭学习娱乐的需要，需要更多的这样应用出现，传统的图片认知仅仅是浏览和分享，认知、分享的娱乐性和互动性不足。

发明内容

为提高图片认知的娱乐和互动性，本发明提供一种指针或手指通过触摸屏幕，使触摸部分从局部到整体显示照片的方法，是通过以下技术方案来实现的：

一种实现手指触摸区域羽化透明效果的方法，其特征在于，包括：

S1，在客户端建立并显示一个视图View，在视图显示区域设置分上下两层图层，下层图层显示视图中物体，上层图层是模糊的区域遮盖住下层图层；；

S2、在手指触摸区域渲染触摸区域的颜色，使触摸区域透明设置在视图上层图层；

S3、设置触摸监听OnTouch事件，监听手指触摸的范围，获取手指先后触摸的坐标old_X,old_Y,new_X,new_Y，计算出手指触摸区域的宽高width，height,获得手指触摸区域的面积S；

S4、渲染S面积的颜色使其透明，显示下层视图图层；

S5、手指离开触摸区域后，重新初始化视图View。

所述方法还包括羽化区域的缩放的方法，包括：

S11、设置触摸监听OnTouch事件，监听两个手指触摸的先后顺序，获取手指触摸的坐标X1,Y1,X2,Y2；

S12、根据手指触摸的坐标计算出手指间的距离d，然后计算出直径为d的圆的面积S1，渲染S1区域使其透明，显示视图的下层图层；

S13、重新获取两手指的坐标X1,Y1,X2,Y2,计算出当前两手距离d及以d为直径的面积S2，计算出S2与S1的倍数，然后实时渲染这部分区域，使其透明化。

本发明的有益效果是：用户通过操作操作指针或手指触摸屏幕，通过局部显示图片到显示图片的全部，提高图片认知、学习的趣味性，照片分享的互动性，提高技术所指代的产品更好的用户体验度。

附图说明

图1为本发明的一种实现手指触摸区域羽化透明效果的方法的流程框图。

图2为本发明的一具体实施例的示意图，其中图2b相比图2a是手指滑动羽化区域放大的示意图。

图3为图1的羽化区域的缩放的方法流程框图。

具体实施方式

以下结合附图对本发明实施例进行详细的描述。

如图1所述，图1是一种实现手指触摸区域羽化透明效果的方法的流程框线图，包括：

S1，在客户端建立一个视图View，在视图显示区域设置分上下两层图层，下层显示所述视图中的物体，上层是模糊的区域遮盖上层视图图层；

S2、在手指触摸区域渲染触摸区域的颜色，使触摸区域透明设置在视图上层；

S3、设置触摸监听OnTouch事件，监听手指触摸的范围，获取手指先后触摸的坐标old_X,old_Y,new_X,new_Y，计算出手指触摸区域的宽高width，height,获得手指触摸区域的面积S；

S4、渲染S面积的颜色使其透明，显示视图下层；

S5、手指离开后，重新初始化视图View。

参考图1，首先，需要在客户端中建立一个视图View，在视图显示区域设置分上下两层图层，下层图层显示物体的真实界面，上层是模糊的区域，下层物体完全不可见或只部分可见。

其次手指触摸区域羽化，即渲染触摸区域颜色，使触摸区域透明，这样透过触摸区域可以看到下层图层物体的一部分。

接着，计算手指触摸区域范围：设置触摸监听OnTouch事件，监听手指触摸的范围，获取手指先后触摸的坐标old_X,old_Y,new_X,new_Y，计算出手指触摸区域的宽高width，height,然后计算出手指触摸区域的面积S。然后渲染S面积的颜色，使其透明，看到下层图层物体。

最后，操作的手指离开客户端触屏控制区域，重新初始化视图View。

结合图2并参考图3所示，图2为本发明的一具体实施例的示意图，其中图2b相比图2a是手指滑动羽化区域放大的示意图，图3为图1的羽化区域的缩放的方法流程框图。

首先，在触屏上控制的两个手指触摸缩放可见范围：

S11、设置触摸监听OnTouch事件，监听两个手指触摸的先后顺序，获取两个手指触摸的坐标X1,Y1,X2,Y2, 计算出连个手指的距离d，然后计算出直径为d的圆的面积S1，渲染S1区域使其透明，看到下层的物体。

其次，用手指操作触屏区域，手指的拖放动作实现羽化区域缩放：

S12、拉伸或缩小两个手指的距离，重新获取两手指的坐标X1,Y1,X2,Y2,计算出当前两手距离d及以d为直径的面积S2。

S13、计算出S2与S1的倍数，然后实时渲染这部分区域，使其透明化，实现了羽化区域的缩放。

以上内容仅为本发明的较佳实施例，对于本领域的普通技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，本说明书内容不应理解为对本发明的限制。

Claims (2)

1.一种实现手指触摸区域羽化透明效果的方法，其特征在于，包括：

S1，在客户端建立并显示一个视图View，在视图显示区域设置分上下两层图层，下层图层显示视图中物体，上层图层是模糊的区域遮盖住下层图层；

S2、在手指触摸区域渲染触摸区域的颜色，使触摸区域透明设置在视图上层；

S3、设置触摸监听OnTouch事件，监听手指触摸的范围，获取手指先后触摸的坐标old_X,old_Y,new_X,new_Y，计算出手指触摸区域的宽高width，height,获得手指触摸区域的面积S；

S4、渲染S面积的颜色使其透明，显示视图下层图层；

S5、手指离开触摸区域后，重新初始化视图View。

2.根据权利要求1所述的方法，其特征在于， 所述方法还包括羽化区域的缩放的方法，包括：

S11、设置触摸监听OnTouch事件，监听两个手指触摸的先后顺序，获取手指触摸的坐标X1,Y1,X2,Y2；

S12、根据手指触摸的坐标计算出手指间的距离d，然后计算出直径为d的圆的面积S1，渲染S1区域使其透明，显示视图的下层图层；

S13、重新获取两手指的坐标X1,Y1,X2,Y2,计算出当前两手距离d及以d为直径的面积S2，计算出S2与S1的倍数，然后实时渲染该区域，使其透明化。