本次讲的手势密码，是在九个按键上实现的，这里讲的是手势密码的基本实现和效果
同样先上效果图
其实就是对画图功能的一个实现，再加上手势操作结合起来。
屏幕宽度高度，方便下面操作，不做解释
#define screenheight [[uiscreen mainscreen] bounds].size.height #define screenwidth [[uiscreen mainscreen] bounds].size.width
控制器.m文件
这里的imageview是用来装手势画图之后的image，看后面就清楚了
@property (nonatomic,strong)nsmutablearray *buttonarr;//全部手势按键的数组 @property (nonatomic,strong)nsmutablearray *selectorarr;//选中手势按键的数组 @property (nonatomic,assign)cgpoint startpoint;//记录开始选中的按键坐标 @property (nonatomic,assign)cgpoint endpoint;//记录结束时的手势坐标 @property (nonatomic,strong)uiimageview *imageview;//画图所需
我要评论
-(nsmutablearray *)selectorarr
{
if (!_selectorarr) {
_selectorarr = [[nsmutablearray alloc]init];
}
return _selectorarr;
}
添加九个按键，设置状态图片，实际开发中一般有三种状态，即默认，选中正确和选择错误，错误一般指的是我们要记录下用户的手势密码，需要用户。
画出两次相同的手势密码才能保存，若两次输入不一致，就是错误状态的一种，当然还包括其它的，不多说了。
这里要强调
btn.userinteractionenabled = no;
这句的重要性，如果不关闭按键的用户交互，下面的uitouch则无法在按键中触发，所以这里必须关闭
- (void)viewdidload {
[super viewdidload];
self.view.backgroundcolor = [uicolor whitecolor];
if (!_buttonarr) {
_buttonarr = [[nsmutablearray alloc]initwithcapacity:9];
}
self.imageview = [[uiimageview alloc]initwithframe:cgrectmake(0, 0, screenwidth, screenheight)];
[self.view addsubview:self.imageview];
for (int i=0; i<3; i++) {
for (int j=0; j<3; j++) {
uibutton *btn = [uibutton buttonwithtype:uibuttontypecustom];
btn.frame = cgrectmake(screenwidth/12+screenwidth/3*j, screenheight/3+screenwidth/3*i, screenwidth/6, screenwidth/6);
[btn setimage:[uiimage imagenamed:@"pbg"] forstate:uicontrolstatenormal];
[btn setimage:[uiimage imagenamed:@"pbg01"] forstate:uicontrolstatehighlighted];
btn.userinteractionenabled = no;
[self.buttonarr addobject:btn];
[self.imageview addsubview:btn];
}
}
}
这个方法就是实现画图的方法
-(uiimage *)drawline{
uiimage *image = nil;
uicolor *col = [uicolor colorwithred:1 green:0 blue:0 alpha:1];
uigraphicsbeginimagecontext(self.imageview.frame.size);//设置画图的大小为imageview的大小
cgcontextref context = uigraphicsgetcurrentcontext();
cgcontextsetlinewidth(context, 5);
cgcontextsetstrokecolorwithcolor(context, col.cgcolor);
cgcontextmovetopoint(context, self.startpoint.x, self.startpoint.y);//设置画线起点
//从起点画线到选中的按键中心，并切换画线的起点
for (uibutton *btn in self.selectorarr) {
cgpoint btnpo = btn.center;
cgcontextaddlinetopoint(context, btnpo.x, btnpo.y);
cgcontextmovetopoint(context, btnpo.x, btnpo.y);
}
//画移动中的最后一条线
cgcontextaddlinetopoint(context, self.endpoint.x, self.endpoint.y);
cgcontextstrokepath(context);
image = uigraphicsgetimagefromcurrentimagecontext();//画图输出
uigraphicsendimagecontext();//结束画线
return image;
}
最后部分是手势，每次在屏幕上点击的时候都会调用的方法
//开始手势
-(void)touchesbegan:(nsset<uitouch *> *)touches withevent:(uievent *)event
{
uitouch *touch = [touches anyobject];//保存所有触摸事件
if (touch) {
for (uibutton *btn in self.buttonarr) {
cgpoint po = [touch locationinview:btn];//记录按键坐标
if ([btn pointinside:po withevent:nil]) {//判断按键坐标是否在手势开始范围内,是则为选中的开始按键
[self.selectorarr addobject:btn];
btn.highlighted = yes;
self.startpoint = btn.center;//保存起始坐标
}
}
}
}
//移动中触发，画线过程中会一直调用画线方法
-(void)touchesmoved:(nsset<uitouch *> *)touches withevent:(uievent *)event
{
uitouch *touch = [touches anyobject];
if (touch) {
self.endpoint = [touch locationinview:self.imageview];
for (uibutton *btn in self.buttonarr) {
cgpoint po = [touch locationinview:btn];
if ([btn pointinside:po withevent:nil]) {
bool isadd = yes;//记录是否为重复按键
for (uibutton *sebtn in self.selectorarr) {
if (sebtn == btn) {
isadd = no;//已经是选中过的按键，不再重复添加
break;
}
}
if (isadd) {//未添加的选中按键，添加并修改状态
[self.selectorarr addobject:btn];
btn.highlighted = yes;
}
}
}
}
self.imageview.image = [self drawline];//每次移动过程中都要调用这个方法，把画出的图输出显示
}
//手势结束触发
-(void)touchesended:(nsset<uitouch *> *)touches withevent:(uievent *)event
{
self.imageview.image = nil;
self.selectorarr = nil;
for (uibutton *btn in self.buttonarr) {
btn.highlighted = no;
}
}
开发中有时需要在最后时把画出的手势密码图显示保留一秒时，不能直接使用上面的画图image输出多一次，因为输出的连最后一条线都画出来了，如果要实现这个保留效果，可以在画线方法里添加一个是否画最后一条线的判断，加个bool传参，在画线结束时再调用这个方法和参数，禁止最后一条线画出来就行了，当然不能在画的过程禁止，而是在结束的时候，不然一条线都画不出的，最后把图片展示多次就行了。
需要的把btn和密码相关联，方法也有很多种，例如给btn设置tag值，把tag对应作为密码保存和验证就行了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
HDU - 5532 A - Almost Sorted Array
react native 实现扫描条形码功能（react-native-camera）
网友评论