jQuery实现手势解锁密码特效

2020-05-23 06:23:15易采站长站整理

that.$ctx.lineTo(x,y);
that.$ctx.stroke();
};

this.pointInList=function(poi,list){
for (var p in list){
if( poi["x"] == list[p]["x"] && poi["y"] == list[p]["y"]){
return ++p;
}
}
return false;
};

this.touched=false;
$(this.id).on ("mousedown touchstart",{that:that},function(e){
e.data.that.touched=true;
});
$(this.id).on ("mouseup touchend",{that:that},function(e){
e.data.that.touched=false;
that.$ctx.clearRect(0,0,that.options.width,that.options.height);
that.$ctx.beginPath();
that.$ctx.putImageData(e.data.that.initImg,0,0);
that.allDraw(that.options.lineColor);
// that.$ctx.stroke();
for(var p in that.sList){
if(e.data.that.pointInList(that.sList[p], e.data.that.pList)){
e.data.that.result= e.data.that.result+(e.data.that.pointInList(that.sList[p], e.data.that.pList)).toString();
}
}
$(element).trigger("hasPasswd",that.result);
});

//
$(this.id).on('touchmove mousemove',{that:that}, function(e) {
if(e.data.that.touched){
var x= e.pageX || e.originalEvent.targetTouches[0].pageX ;
var y = e.pageY || e.originalEvent.targetTouches[0].pageY;
x=x-that.$element.offset().left;
y=y-that.$element.offset().top;
var p = e.data.that.isIn(x, y);
console.log(x)
if(p != 0 ){
if ( !e.data.that.pointInList(p,e.data.that.sList)){
e.data.that.sList.push(p);
}
}
console.log( e.data.that.sList);
e.data.that.draw(x, y);
}

});

$(this.id).on('passwdWrong',{that:that}, function(e) {
that.$ctx.clearRect(0,0,that.options.width,that.options.height);
that.$ctx.beginPath();
that.$ctx.putImageData(that.initImg,0,0);
that.allDraw("#cc1c21");
that.result="";
that.pList=[];
that.sList=[];

setTimeout(function(){
that.$ctx.clearRect(0,0,that.options.width,that.options.height);
that.$ctx.beginPath();
that.initDraw()
},500)

});

$(this.id).on('passwdRight',{that:that}, function(e) {
that.$ctx.clearRect(0,0,that.options.width,that.options.height);
that.$ctx.beginPath();
that.$ctx.putImageData(that.initImg,0,0);
that.allDraw("#00a254");
that.result="";
that.pList=[];
that.sList=[];
setTimeout(function(){
that.$ctx.clearRect(0,0,that.options.width,that.options.height);
that.$ctx.beginPath();
that.initDraw()
},500)
});

};

GesturePasswd.DEFAULTS = {
zindex :100,
roundRadii:25,
pointRadii:6,
space:30,
width:240,
height:240,
lineColor:"#00aec7",
backgroundColor:"#252736",
color:"#FFFFFF"
};

//代码整理:懒人之家 www.lanrenzhijia.com

function Plugin(option,arg) {