接上篇，【OC梳理】事件传递响应链-原理篇
对于事件传递响应链，最常见的处理就是处理不规则区域的点击事件(例如以前常见的中间按钮凸起的tabbar)，接下来模拟一下这种需求：
中间凸起的Tabbar
用一个自定义的View模拟tabbar的样式：
这个图形可以简单地拆分成为 矩形+圆 的合成，我们使用UIBezierPath可以很容易地绘制出来:
- (UIBezierPath *)tabbarPointsWithStartPoint:(CGPoint)startPoint
rectangleWidth:(CGFloat)rectangleWidth
rectangleHeight:(CGFloat)rectangleHeight
circleRadius:(CGFloat)circleRadius{
UIBezierPath *linePath = [UIBezierPath bezierPathWithRect:CGRectMake(startPoint.x, startPoint.y, rectangleWidth, rectangleHeight)];
[linePath addArcWithCenter:CGPointMake(startPoint.x + rectangleWidth/2.f, startPoint.y + rectangleHeight - circleRadius) radius:circleRadius startAngle:0 endAngle:2*M_PI clockwise:YES];
return linePath;
}
然后自定义一个View，方便测试：
@interface TestView : UIView
/// 设置路径
@property ( nonatomic, assign ) CGPathRef path;
@end
@implementation TestView{
CAShapeLayer *shapeLayer;
}
- (void)setPath:(CGPathRef)path{
_path = path;
shapeLayer = [CAShapeLayer layer];
shapeLayer.path = _path;
shapeLayer.fillColor = [UIColor whiteColor].CGColor;
shapeLayer.fillRule = kCAFillRuleNonZero;
self.layer.mask = shapeLayer;
}
- (void)dealloc{
CFRelease(_path);
}
@end
添加到ViewController中：
TestView *testView = [[TestView alloc]initWithFrame:CGRectMake(20, 40, 250, 250)];
testView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:testView];
testView.path = [self tabbarPointsWithStartPoint:[testView convertPoint:CGPointMake(20, 290 - 49) fromView:self.view] rectangleWidth:250 rectangleHeight:49 circleRadius:30].CGPath;
很好 界面效果出来了，接下来给testView添加点击事件:
// ...
UITapGestureRecognizer *suptap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(viewTarget:)];
[testView addGestureRecognizer:suptap];
//...
- (void)viewTarget:(UITapGestureRecognizer *)tap{
NSLog(@"点击了testView");
}
然后加上上一篇的事件处理：
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
if (self.userInteractionEnabled
&& !self.hidden
&& [self pointInside:point withEvent:event]) {
// 使用reverseObjectEnumerator进行倒序遍历
for (UIView *subview in [self.subviews reverseObjectEnumerator]) {
CGPoint convertedPoint = [subview convertPoint:point fromView:self];
UIView *responseView = [subview hitTest:convertedPoint withEvent:event];
if (responseView) {
return responseView;
}
}
return self;
}
return nil;
}
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event{
if (self.userInteractionEnabled
&& !self.hidden
&& CGRectContainsPoint(self.bounds, point)) {
return YES;
}
for (UIView *subview in [self.subviews reverseObjectEnumerator]) {
CGPoint convertedPoint = [subview convertPoint:point fromView:self];
BOOL inside = [subview pointInside:convertedPoint withEvent:event];
if (inside) {
return YES;
}
}
return NO;
}
现在点击红框区域就能输出点击了testView了：
现在要如何让testView只在灰色区域响应点击事件呢？
对于判断点与多边形的关系，经典的一个算法是射线检测算法
OC中提供了一个判断path与点是否相交的方法:
/* Return true if `point' is contained in `path'; false otherwise. A point
is contained in a path if it is inside the painted region when the path
is filled; if `eoFill' is true, then the even-odd fill rule is used to
evaluate the painted region of the path, otherwise, the winding-number
fill rule is used. If `m' is non-NULL, then the point is transformed by
`m' before determining whether the path contains it. */
CG_EXTERN bool CGPathContainsPoint(CGPathRef cg_nullable path,
const CGAffineTransform * __nullable m, CGPoint point, bool eoFill)
CG_AVAILABLE_STARTING(__MAC_10_4, __IPHONE_2_0);
翻译一下参数：
/**
判断点是否在path内
@param path 路径path
@param m 变换矩阵，可以不传
@param point 点
@param eoFill 填充规则，如果为true使用奇偶校验(对应CAShapeLayer中的kCAFillRuleEvenOdd)，如果为false使用非0校验(对应kCAFillRuleNonZero)
@return 如果点在path中，则返回true；否则为false。
*/
CG_EXTERN bool CGPathContainsPoint(CGPathRef cg_nullable path,
const CGAffineTransform * __nullable m, CGPoint point, bool eoFill)
CG_AVAILABLE_STARTING(__MAC_10_4, __IPHONE_2_0);
关于eoFill的两个值，这里说一下我的理解：
kCAFillRuleNonZero:
使用非0校验规则。对路径划分出来的区域，每个区域取任意点做任意方向的射线。如果路径从左往右(基于射线方向)穿过该射线，则+1；从右往左穿过，则-1。如果计算总和为0，则判断该点在路径外，该区域不填充；反之，计算总和为0，则判断该点在路径内，该区域填充。
kCAFillRuleEvenOdd:
使用奇偶校验规则。对路径划分出来的区域，每个区域取任意点做任意方向的射线。如果有任意路径穿过该射线，则+1。如果计算总和为偶数，则判断该点在路径外，该区域不填充；反之，如果计算总和为奇数，则判断该点在路径内，该区域填充。
在- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event方法中稍作修改：
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event{
if (self.userInteractionEnabled
&& !self.hidden
&& CGRectContainsPoint(self.bounds, point)) {
/**
可以使用下面的代码让区域上移10：
CGAffineTransform transform = CGAffineTransformMakeTranslation(0, 10);
CGPathContainsPoint(shapeLayer.path, &transform, point, NO)
**/
// 判断点是否在范围内
if (CGPathContainsPoint(shapeLayer.path, nil, point, NO)) {// YES对应kCAFillRuleEvenOdd ，NO对应 kCAFillRuleNonZero
NSLog(@"点击了shapeLayer");
}
return YES;
}
for (UIView *subview in [self.subviews reverseObjectEnumerator]) {
CGPoint convertedPoint = [subview convertPoint:point fromView:self];
BOOL inside = [subview pointInside:convertedPoint withEvent:event];
if (inside) {
return YES;
}
}
return NO;
}
现在点击红框区域还是输出
点击了testView，点击灰色区域，则会输出：
... 点击了shapeLayer
... 点击了shapeLayer
... 点击了subview
为什么会输出两次点击了shapeLayer?
原因是在响应过程中同一个testView的
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event会被调用两次，一次是查找响应对象的入栈操作，一次是响应方法时的出栈操作。
现在将pointInside:withEvent:方法改为在灰色区域才返回YES，就能只响应灰色区域的点击事件啦：
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event{
if (self.userInteractionEnabled
&& !self.hidden
&& CGRectContainsPoint(self.bounds, point)) {
// 判断点是否在范围内
if (CGPathContainsPoint(shapeLayer.path, nil, point, NO)) {// YES对应kCAFillRuleEvenOdd ，NO对应 kCAFillRuleNonZero
return YES;
}
}
for (UIView *subview in [self.subviews reverseObjectEnumerator]) {
CGPoint convertedPoint = [subview convertPoint:point fromView:self];
BOOL inside = [subview pointInside:convertedPoint withEvent:event];
if (inside) {
return YES;
}
}
return NO;
}
画一个五角星的点击区域？
是不是很简单呢？就这样啦~
网友评论