写在最前面，闲来无事，恰逢接近过年，心情无比激动，但是作为一名码农，绝对不能闲下来，故突发奇想，想做一个关于九宫格的手势滑动解锁，之前用过很多次，觉的酷酷哒，话不多说，下面进入正题
先上图
效果图1.png
作为一个好的程序猿，看到一个效果图之后，我们首先做的是什么呢，恕在下愚见，当然不是盲目的去敲代码，首先是分析问题，想想会用到什么技术，大概需要涉及到API，功能点都这么去实现呢，会用到什么模式呢，下面我就简单分析下我在写这个demo的时候的一些想法，若有什么不对的地方，请大神多多指教，技术总是在探讨中进步
- 1 、分析问题
要实现该功能，难点在于，我们该怎么去实现线条的绘制。既然是手势移动，那么我们肯定会在移动过程中一直进行绘制，这样的话，我们就有两种选择：
1 touch事件 - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
在移动过程中获取位置坐标，然后进行绘制
2 UIPanGestureRecognizer 摇动或者拖拽手势
移动的方式有了，那么我们还缺什么呢，当然是绘制线路的选择方式，这里我们也有两种方式
1、通过 UIBezierPath UIBezierPath 解释：UIBezierPath是Core Graphics框架关于path的一个封装。可以创建基于矢量的路径，例如椭圆或者矩形，或者有多个直线和曲线段组成的形状。 下面是简单的绘制了一个矩形
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor colorWithRed:0 green:0 blue:0 alpha:1];
[color set]; //设置线条颜色
UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(120, 120, 100, 50)];
aPath.lineWidth = 5.0;
aPath.lineCapStyle = kCGLineCapRound; //线条拐角
aPath.lineJoinStyle = kCGLineCapRound; //终点处理
[aPath stroke];
}
2 、通过CGContext 或者 CGPath(路径) 相信大家对CGContext比较熟悉也用的比较多，可以用来画各种图形，那么CGPath呢，我个人感觉和CGContext差不多，只是调用的方法可能不一样
后面才发现，UIBezierPath其实就是对CGPathRef的封装
下面为大家开启三个传送门，可以更好的了解了解
Core Graphics框架 : 一个让程序猿成为视觉设计师的框架
Quartz 2D绘图基础：CGContextRef
CGContextRef，CGPath 和 UIBezierPath的区别
CGContextRef contextRef = UIGraphicsGetCurrentContext();
说完上面两个方法后，下面就是怎么利用所绘制的路线呢？这里有两个思路
1 我们可以将当前view上面加一个UIImageview，其大小和当前view一样，我们在移动的时候，不停为其设置image，代码如下
- (void)viewDidLoad
{
[super viewDidLoad];
self.drawLineImageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:_drawLineImageView];
}
//根据颜色绘制图片
- (UIImage *)imageWithColor:(UIColor *)color{
UIImage *image = nil;
if (self.addPasswords.count > 0)
{
UIButton * startButton = self.addPasswords[0];
UIGraphicsBeginImageContext(self.drawLineImageView.bounds.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, color.CGColor);
CGContextSetLineWidth(context, 5);
CGContextMoveToPoint(context, startButton.center.x, startButton.center.y);
for (UIButton *button in self.addPasswords)
{
CGPoint point = button.center;
CGContextAddLineToPoint(context, point.x, point.y);
CGContextMoveToPoint(context, point.x, point.y);
}
CGContextAddLineToPoint(context, self.endPoint.x, self.endPoint.y);
CGContextStrokePath(context);
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
return nil;
}
2 就是调用 - (void)drawRect:(CGRect)rect 函数，在view上绘制当前路径，当然必须调用 [self setNeedsDisplay] ，来实时绘制
针对以上的方案，我选择的是touch事件和CGContext并且设置图片的image的方法
写在最后，希望到这里，对大家有一点点帮助，下面就为大家开启传送门，送上Demo，如有不好的地方，多多指教，如果你觉得好的话，可以star一个哦，功能包含两次设置密码，验证密码，效果图如下
九宫格手势密码设置.gif
网友评论