iOS实现UIImageView透明区域点击事件穿透

问题

最近要在iPad上实现一个很独特的功能,简单描述一下就是要显示一个带有半透明背景的弹出界面,在其上加一个不规则形状的图片,手指点击这个弹出界面的半透明区域就退出这个弹出界面。

问题是UED/美工不会提供纯粹的不规则形状切图,实际只能给出的是以不规则形状加透明区域的矩形切图,这就带来另外一个要求:点击矩形切图的透明区域也要退出弹出界面。这就有点难办了,透明区域也是不规则形状的,该怎么判断出手指点击的点就是透明区域呢?

思路

一般在iOS的控件中,要不就是完全允许用户点击,要不就是禁止用户交互,这是可以通过设置控件的userInteractionEnabled属性来修改。如果添加的图片不是不规则形状的,而是矩形,这问题就简单多了,只需要将矩形图片对应的UIImageView的userInteractionEnabled设为YES,对半透明背景View(或者直接设置为一个按钮)设置点击事件处理,就可以点击实现半透明背景退出弹出界面。

现在的情况是这个矩形图片一分为二,一部分为实体的不规则形状图片,一部分为不规则形状的透明区域。很显然,问题的解决思路是:让手指能“穿透”这个不规则透明区域去点击背后的半透明背景,而不透明部分就不“穿透”。

前面说的userInteractionEnabled属性只是简单地一刀切设置控件是否允许用户操作(即可以响应手指触摸事件),更加灵活的设置方法是使用UIView的hitTest:withEvent:与pointInside:withEvent:。简单介绍下,iOS中的pointInside:withEvent:方法是用来判断当前的点击或者触摸事件的点是否在当前的view中,它被hitTest:withEvent:调用,通过对每个子视图调用pointInside:withEvent:决定最终哪个视图来响应此事件。如果一个子视图的pointInside:withEvent:返回NO,说明这个子视图不会响应点击事件,然后就去寻找更深层的子视图来找到最终响应触摸事件;返回YES就说明子视图能响应点击事件(但不一定是子视图本身响应,若子视图还有子视图的话,还会继续循环去找最终响应事件的子子视图)。

于是,本文的问题就可以这样转化:创建一个UIImageView的子类,重写pointInside:withEvent:方法,让矩形图片的透明区域的pointInside:withEvent:返回NO,而非透明区域的pointInside:withEvent:返回YES,如果能达到这个要求,透明区域点击事件穿透就能够实现。

现在的关键问题是怎么识别出这个透明区域。

iOS中通常用的图片是PNG图片,这种图片有alpha通道,如果能获取PNG图片每个像素的alpha值,就不难判断出手指点击的图片区域是不是透明的。

关键代码如下:

Here’s Code

12345678910111213141516

-(BOOL)pointInside:(CGPoint)pointwithEvent:(UIEvent*)event{//Using code from http://stackoverflow.com/questions/1042830/retrieving-a-pixel-alpha-value-for-a-uiimageunsignedcharpixel[1]={0};CGContextRefcontext=CGBitmapContextCreate(pixel,1,1,8,1,NULL,kCGImageAlphaOnly);UIGraphicsPushContext(context);[self.imagedrawAtPoint:CGPointMake(-point.x,-point.y)];UIGraphicsPopContext();CGContextRelease(context);CGFloatalpha=pixel[0]/255.0f;BOOLtransparent=alpha<0.01f;return!transparent;}

解释:

这段代码是通过CGBitmapContextCreate方法创建只包含alpha通道的图形上下文(真不知道context怎么翻译为最好),这个图形上下文的大小为1x1,也就是实际上只放得下一个像素,将矩形图片手指触摸点point绘制到这个图形上下文中,那么pixel数组中唯一元素的值就是手指触摸点那一个像素的alpha值,做归一化为与0.01比较,如果小于0.01就表明手指触摸点是透明的,这时候返回NO就能够实现穿透效果,相反大于0.01就不会穿透。

注意到代码中用到的坐标为(-point.x, -point.y),为什么会是负数呢?这是因为如果context的区域大小与image一致的话,[image drawAtPoint:]就会将image全部绘制在context中,而实际上context只放得下一个像素,为了保证point点能刚好绘制在这个context上,就必须设置绘制的起始坐标为(-point.x, -point.y)。

代码中的UIGraphicsPushContext容易误导人,看名字以为是将参数中指定的context push入栈,但是参数中的context明明就是刚创建的啊?其实它是将旧的context(默认的context)入栈,再切换到新的context(也就是参数中指定的)绘制,执行UIGraphicsPopContext后就会切换回旧的context,而在新的context上绘制的内容完全不影响旧context(默认context)。这与CGContextSaveGState和CGContextRestoreGState是有本质区别的。

附CGBitmapContextCreate函数参数详解:

原型:

123456789

CGContextRefCGBitmapContextCreate(void*data,size_twidth,size_theight,size_tbitsPerComponent,size_tbytesPerRow,CGColorSpaceRefcolorspace,CGBitmapInfobitmapInfo);

参数:

data 指向要渲染的绘制内存的地址。这个内存块的大小至少是(bytesPerRow*height)个字节

width bitmap的宽度,单位为像素

height bitmap的高度,单位为像素

bitsPerComponent 内存中像素的每个组件的位数.例如,对于32位像素格式和RGB 颜色空间,你应该将这个值设为8.

bytesPerRow bitmap的每一行在内存所占的比特数

colorspace bitmap上下文使用的颜色空间。

bitmapInfo 指定bitmap是否包含alpha通道,像素中alpha通道的相对位置,像素组件是整形还是浮点型等信息的字符串。

描述:

当你调用这个函数的时候,Quartz创建一个位图绘制环境,也就是位图上下文。当你向上下文中绘制信息时,Quartz把你要绘制的信息作为位图数据绘制到指定的内存块。一个新的位图上下文的像素格式由三个参数决定:每个组件的位数,颜色空间,alpha选项。alpha值决定了绘制像素的透明性。这篇文章可以设置夜间模式,不懂可以问我。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 在iOS开发中经常会涉及到触摸事件。本想自己总结一下,但是遇到了这篇文章,感觉总结的已经很到位,特此转载。作者:L...
    WQ_UESTC阅读 5,995评论 4 26
  • 18- UIBezierPath官方API中文翻译(待校对) ----------------- 华丽的分割线 -...
    醉卧栏杆听雨声阅读 1,052评论 1 1
  • 一篇搞定事件传递、响应者链条、hitTest和pointInside的使用发生触摸事件后,系统会将该事件加入到一个...
    克鲁德李阅读 1,111评论 0 1
  • 好奇触摸事件是如何从屏幕转移到APP内的?困惑于Cell怎么突然不能点击了?纠结于如何实现这个奇葩响应需求?亦或是...
    Lotheve阅读 56,846评论 51 598
  • Core Animation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做Laye...
    小猫仔阅读 3,691评论 1 4