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

原文转自&＃xff1a;http://wonderffee.github.io/blog/2013/07/10/pass-touch-event-through-uiimageviews-transparent-area-in-ios/

问题

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

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

思路

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

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

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

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

现在的关键问题是怎么识别出这个透明区域。
iOS中通常用的图片是PNG图片&＃xff0c;这种图片有alpha通道&＃xff0c;如果能获取PNG图片每个像素的alpha值&＃xff0c;就不难判断出手指点击的图片区域是不是透明的。

关键代码如下&＃xff1a;

Here’s Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event { //Using code from http://stackoverflow.com/questions/1042830/retrieving-a-pixel-alpha-value-for-a-uiimage unsigned char pixel[1] &＃61; {0}; CGContextRef context &＃61; CGBitmapContextCreate(pixel, 1, 1, 8, 1, NULL, kCGImageAlphaOnly); UIGraphicsPushContext(context); [self.image drawAtPoint:CGPointMake(-point.x, -point.y)]; UIGraphicsPopContext(); CGContextRelease(context); CGFloat alpha &＃61; pixel[0]/255.0f; BOOL transparent &＃61; alpha < 0.01f; return !transparent; }

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

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

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

附CGBitmapContextCreate函数参数详解:
原型&＃xff1a;

1
2
3
4
5
6
7
8
9

CGContextRef CGBitmapContextCreate ( void *data, size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow, CGColorSpaceRef colorspace, CGBitmapInfo bitmapInfo );

参数&＃xff1a;
data 指向要渲染的绘制内存的地址。这个内存块的大小至少是&＃xff08;bytesPerRow*height&＃xff09;个字节
width bitmap的宽度,单位为像素
height bitmap的高度,单位为像素
bitsPerComponent 内存中像素的每个组件的位数.例如&＃xff0c;对于32位像素格式和RGB 颜色空间&＃xff0c;你应该将这个值设为8.
bytesPerRow bitmap的每一行在内存所占的比特数
colorspace bitmap上下文使用的颜色空间。
bitmapInfo 指定bitmap是否包含alpha通道&＃xff0c;像素中alpha通道的相对位置&＃xff0c;像素组件是整形还是浮点型等信息的字符串。

描述&＃xff1a;
当你调用这个函数的时候&＃xff0c;Quartz创建一个位图绘制环境&＃xff0c;也就是位图上下文。当你向上下文中绘制信息时&＃xff0c;Quartz把你要绘制的信息作为位图数据绘制到指定的内存块。一个新的位图上下文的像素格式由三个参数决定&＃xff1a;每个组件的位数&＃xff0c;颜色空间&＃xff0c;alpha选项。alpha值决定了绘制像素的透明性。