iOS开发：手势解锁（带路线相交检测）

一个普通的手势解锁插件，可以判断路线交叉

预览

思路

（1）画点画线

dot和line，用ios自带绘图来做

#pragma mark - 搭建初始UI
- (void)createUI
{
    // 提示语
    tipLabel = [[UILabel alloc] initWithFrame:CGRectMake(self.frame.size.width / 2 - 100, 60, 200, 30)];
    tipLabel.text = @"请输入手势";
    tipLabel.textAlignment = NSTextAlignmentCenter;
    tipLabel.textColor = [UIColor redColor];
    [self addSubview:tipLabel];
    
    // 按钮
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(self.frame.size.width / 2 - 50, 120, 100, 30);
    [button setTitle:@"隐藏手势" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [button addTarget:self
               action:@selector(hide)
     forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:button];
    
    // 九宫格点阵，每个点用view替代，用tag设置索引（其实可以设置图片，用数组存起来索引）
    CGFloat dotSpace = (self.frame.size.width - kCol * kDotSize) / (kCol + 1); // 点之间的间距
    
    for (int i = 0; i < kRow; i++)
    {
        for (int j = 0; j < kCol; j++)
        {
            UIView *dotView = [[UIView alloc] initWithFrame:CGRectMake(dotSpace + (kDotSize + dotSpace) * j, kBoardTop + dotSpace + (kDotSize + dotSpace) * i, kDotSize, kDotSize)];
            dotView.backgroundColor = [UIColor lightGrayColor]; // 初始颜色
            dotView.tag = (i * kCol + j) + 1000; // 索引
            dotView.layer.cornerRadius = kDotSize / 2; // 切成圆形
            [self addSubview:dotView];
        }
    }
}

#pragma mark - 触摸事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    // 清除之前的轨迹
    [lineArray removeAllObjects];
    
    // 把所有的点状态重置
    [gestureDotIndexArray removeAllObjects];
    for (int i = 0; i < kRow * kCol; i++)
    {
        UIView *dotView = [self viewWithTag:i + 1000];
        
        dotView.userInteractionEnabled = YES;
        dotView.backgroundColor = [UIColor lightGrayColor];
    }
    
    // 获取第一个点
    startPoint = [touches.anyObject locationInView:self];
    
    // 判断如果在某个dot里面就开始记录
    for (int i = 0; i < kRow * kCol; i++)
    {
        UIView *dotView = [self viewWithTag:i + 1000];
        if (CGRectContainsPoint(dotView.frame, startPoint))
        {
            // 第一个点选中了
            isStartDotSelected = YES;
            
            // 如果在里面就标记
            dotView.backgroundColor = [UIColor greenColor];
            dotView.userInteractionEnabled = NO; // 可以用其他的标志字，这里就简单用这个属性好了
            
            // 更改起始点为中心
            startPoint = dotView.center;
            
            // dot添加到轨迹
            [gestureDotIndexArray addObject:[NSNumber numberWithInt:i]];
        }
    }
    
}



- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    // 终止点
    endPoint = [touches.anyObject locationInView:self];
    
    // 一定在起始点选中的基础上才有轨迹
    if (isStartDotSelected)
    {
        // 临时轨迹
        tempLine = [UIBezierPath bezierPath];
        [tempLine moveToPoint:startPoint];
        [tempLine addLineToPoint:endPoint];
        
#ifdef check_intersect
        // 判断与之前的线段是否相交,不算最近的一个有接点的线段(目前体验不够好)
        for (int i = 0; lineArray.count > 0 && i < lineArray.count - 1; i++)
        {
            UIBezierPath *path = lineArray[i];
            
            // 得到线段端点数组
            NSArray *tempLinePoints = [self getPointsFromPath:tempLine];
            NSArray *pathPoints = [self getPointsFromPath:path];
            
            // array里面都是元数据，value转成point,因为array里面只能存value
            NSValue *value1 = tempLinePoints.firstObject;
            CGPoint p1 = [value1 CGPointValue];
            
            NSValue *value2 = tempLinePoints.lastObject;
            CGPoint p2 = [value2 CGPointValue];
            
            NSValue *value3 = pathPoints.firstObject;
            CGPoint p3 = [value3 CGPointValue];
            
            NSValue *value4 = pathPoints.lastObject;
            CGPoint p4 = [value4 CGPointValue];
            
            // 相交测试
            if (checkLineIntersection(p1, p2, p3, p4))
            {
                [self shakeAnimationForView:tipLabel];
                [self resetGesture];
            }
        }
#endif
        
        // 判断终点是否在dot里面,并且这个点没有划过
        for (int i = 0; i < kRow * kCol; i++)
        {
            UIView *dotView = [self viewWithTag:i + 1000];
            
            // 必须两个条件一起判保证点不会重入
            if (CGRectContainsPoint(dotView.frame, endPoint) && dotView.userInteractionEnabled)
            {
                // 如果在里面就标记
                dotView.backgroundColor = [UIColor colorWithRed:(arc4random() % 256) / 256.0f
                                                          green:(arc4random() % 256) / 256.0f
                                                           blue:(arc4random() % 256) / 256.0f
                                                          alpha: 1];
                dotView.userInteractionEnabled = NO; // 可以用其他的标志字，这里就简单用这个属性好了
                
                // dot添加到轨迹
                [gestureDotIndexArray addObject:[NSNumber numberWithInt:i]];
                
                // 重新规划路径
                
                UIBezierPath *settledLine = [[UIBezierPath alloc] init];
                [settledLine moveToPoint:startPoint];
                [settledLine addLineToPoint:dotView.center];
                
                // 存储路径
                [lineArray addObject:settledLine];
                
                // 此处判断一下线路是否相交
                
                
                // 修改起始点
                startPoint = dotView.center;
            }
        }
    }
    // 重绘
    [self setNeedsDisplay];
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    // 处理密码
    [self processPassword];
    
    // 最后清除存储的密码轨迹
    [self resetGesture];
    
    // 重绘
    [self setNeedsDisplay];
    
}

#pragma mark - 绘制
- (void)drawRect:(CGRect)rect
{
    // 绘制临时路径
    
    tempLine.lineWidth = 5;
    tempLine.lineJoinStyle = kCGLineJoinRound;
    [[UIColor redColor] set];
    [tempLine stroke];
    
    // 绘制轨迹
    for (UIBezierPath *path in lineArray)
    {
        path.lineWidth = 5;
        path.lineJoinStyle = kCGLineJoinRound;
        [[UIColor blueColor] set];
        [path stroke];
    }
}

（2）密码处理

密码可以是字符串，存到本地，或者用于二次加密

#pragma mark - 处理手势得到的密码
- (void)processPassword
{
    // 得到密码
    NSMutableString *passwordStr = [[NSMutableString alloc] init];
    for (NSNumber *indexNumber in gestureDotIndexArray)
    {
        [passwordStr appendString:[NSString stringWithFormat:@"%d", indexNumber.intValue]];
    }
    
    switch (_gestureState)
    {
        case CREATE_STATE:
        {
            pwdSetCount++;
            
            if (pwdSetCount == 1)
            {
                // 密码存文件（或者全局变量）
                [[NSUserDefaults standardUserDefaults] setObject:passwordStr forKey:kPasswordKey];
                [[NSUserDefaults standardUserDefaults] synchronize];
                
                tipLabel.text = @"请再输一次";
                [self shakeAnimationForView:tipLabel];
            }
            else if (pwdSetCount == kPwdCount)
            {
                // 检验跟第一次是否一样
                NSString *originalPwd = [[NSUserDefaults standardUserDefaults] objectForKey:kPasswordKey];
                if ([passwordStr isEqualToString:originalPwd])
                {
                    if (self.passwordSetBlock)
                    {
                        self.passwordSetBlock([NSString stringWithFormat:@"password created: %@", passwordStr]);
                    }
                    [self hide];
                }
                else
                {
                    tipLabel.text = @"密码校验与第一次不同，重新输入";
                    [self shakeAnimationForView:tipLabel];
                    pwdSetCount--; // 减回去
                }
            }
            
            
            
        }
            break;
            
        case VERIFY_STATE:
        {
            // 校验密码
            NSString *originalPwd = [[NSUserDefaults standardUserDefaults] objectForKey:kPasswordKey];
            if ([passwordStr isEqualToString:originalPwd])
            {
                if (self.passwordSetBlock)
                {
                    self.passwordSetBlock(@"password verify success!");
                }
                [self hide];
            }
            else
            {
                if (self.passwordSetBlock)
                {
                    self.passwordSetBlock(@"password verify failed!");
                }
                
                tipLabel.text = @"密码校验失败，重新输入";
                [self shakeAnimationForView:tipLabel];
            }
            
        }
            break;
            
        default:
            break;
    }
}

（3）线段相交检测
如果要求画出的手势路线不能相交，需要线段相交算法，从线段获得两个端点的坐标

#pragma mark - 线段相交测试(p1,p2是线段1的端点，p3,p4是线段2的端点)
bool checkLineIntersection(CGPoint p1, CGPoint p2, CGPoint p3, CGPoint p4)
{
    CGFloat denominator = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
    
    // In this case the lines are parallel so we assume they don't intersect~
    if (denominator <= (1e-6) && denominator >= -(1e-6))
    {
        return true;
    }
    
    // amazing~
    CGFloat ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator;
    CGFloat ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator;
    
    if (ua >= 0.0f && ua <= 1.0f && ub >= 0.0f && ub <= 1.0f)
    {
        return true;
    }
    return false;
}

#pragma mark - 从贝塞尔曲线上得到点列表
// http://stackoverflow.com/questions/3051760/how-to-get-a-list-of-points-from-a-uibezierpath
- (NSMutableArray *)getPointsFromPath:(UIBezierPath *)path
{
    CGPathRef pathCGPath = path.CGPath;
    NSMutableArray *bezierPoints = [NSMutableArray array];
    CGPathApply(pathCGPath, (__bridge void * _Nullable)(bezierPoints), MyCGPathApplierFunc);
    
    return bezierPoints.copy;
}

void MyCGPathApplierFunc(void *arrayInfo, const CGPathElement *element)
{
    NSMutableArray *bezierPoints = (__bridge NSMutableArray *)arrayInfo;
    
    CGPoint *points = element->points;
    CGPathElementType type = element->type;
    
    switch(type)
    {
        case kCGPathElementMoveToPoint: // contains 1 point
            [bezierPoints addObject:[NSValue valueWithCGPoint:points[0]]];
            break;
            
        case kCGPathElementAddLineToPoint: // contains 1 point
            [bezierPoints addObject:[NSValue valueWithCGPoint:points[0]]];
            break;
            
        case kCGPathElementAddQuadCurveToPoint: // contains 2 points
            [bezierPoints addObject:[NSValue valueWithCGPoint:points[0]]];
            [bezierPoints addObject:[NSValue valueWithCGPoint:points[1]]];
            break;
            
        case kCGPathElementAddCurveToPoint: // contains 3 points
            [bezierPoints addObject:[NSValue valueWithCGPoint:points[0]]];
            [bezierPoints addObject:[NSValue valueWithCGPoint:points[1]]];
            [bezierPoints addObject:[NSValue valueWithCGPoint:points[2]]];
            break;
            
        case kCGPathElementCloseSubpath: // contains no point
            break;
    }
}

源代码下载

csdn: 手势解锁

github： 手势解锁