【OC梳理】事件传递响应链-实战篇(伪)

接上篇,【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;
}
复制代码

画一个五角星的点击区域?

是不是很简单呢?就这样啦~

转载于:https://juejin.im/post/5bcda1c5518825780f4bfca7

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值