gesture password web

display-server/src/main/resources/server-page.xml

@@ -168,4 +168,6 @@
	<action name="OpenSourceComponent" template="template/webapp/more/opensource/OpenSourceComponent.html"></action>
	<!-- 签名 -->
	<action name="WriteName" template="template/webapp/more/opensource/WriteName.html"></action>
	<!-- web手势锁 -->
	<action name="GesturePassword" template="template/webapp/more/opensource/GesturePassword.html"></action>
</pages>

display-server/src/main/webapp/biz/js/more/opensource/GesturePassword.js

@@ -0,0 +1,36 @@
require(["domReady!","common","mobile","jquery","gesturePassword"], function(doc,Common,Mobile,jQuery,GesturePasswd) {
	
	jQuery("#gesturepwd").GesturePasswd({
	    backgroundColor:"#ffffff",  //背景色
	    color:"#d5d5d5",   //主要的控件颜色
	    roundRadii:24,    //大圆点的半径
	    pointRadii:7, //大圆点被选中时显示的圆心的半径
	    space:38,  //大圆点之间的间隙
	    width:260,   //整个组件的宽度
	    height:260,  //整个组件的高度
	    lineColor:"#9f9f9f",   //用户划出线条的颜色
	    zindex :100  //整个组件的css z-index属性
	});
	jQuery("#gesturepwd").bind("hasPasswd",function(e,passwd){
		console.log(passwd)
		
		if(passwd != "1235789"){
          	Mobile.tip("手势锁密码错误，解锁手势为：Z ");
          	//显示一下错误的手势线（红色的，只显示一秒）
          	jQuery("#gesturepwd").trigger("passwdWrong");
          	return;
      	} else {
      		Mobile.tip("解锁成功~~~~");
      		//显示一下正确的手势线（绿色的，只显示一秒）
      		jQuery("#gesturepwd").trigger("passwdRight");
      		return;
      	}
		
		
	});
	
	//取消鼠标移动拖动页面事件
	$("#gesturepwd").bind("touchmove",(function(){
	    window.event.preventDefault();
	}));
});

display-server/src/main/webapp/res/js/base/gesture.password.js

@@ -0,0 +1,259 @@
;
define(["jquery"],function($){
    var GesturePasswd= function (element, options) {
        this.$element	= $(element);
        this.options	= options;
        var that=this;
        this.pr=options.pointRadii;
        this.rr=options.roundRadii;
        this.o=options.space;
        this.color=options.color;
        //ȫ����ʽ
        this.$element.css({
            "position":"relation",
            "width":this.options.width,
            "height":this.options.height,
            "background-color":options.backgroundColor,
            "overflow":"hidden",
            "cursor":"default"
        });
        //ѡ�����淶
        if(! $(element).attr("id"))
            $(element).attr("id",(Math.random()*65535).toString());
        this.id="#"+$(element).attr("id");
        var Point = function (x,y){
            this.x  =x;this.y=y
        };
        this.result="";
        this.pList=[];
        this.sList=[];
        this.tP=new Point(0,0);
        this.$element.append('<canvas class="main-c" width="'+options.width+'" height="'+options.height+'" >');
        //this.$element.append('<canvas class="main-p" width="'+options.width+'" height="'+options.height+'" >');
        this.$c= $(this.id+" .main-c")[0];
        this.$ctx=this.$c.getContext('2d');
        this.initDraw=function(){
            this.$ctx.strokeStyle=this.color;
            this.$ctx.lineWidth=2;
            for(var j=0; j<3;j++ ){
                for(var i =0;i<3;i++){
                    this.$ctx.moveTo(this.o/2+this.rr*2+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr));
                    this.$ctx.arc(this.o/2+this.rr+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr),this.rr,0,2*Math.PI);
                    var tem=new Point(this.o/2+this.rr+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr));
                    if (that.pList.length < 9)
                        this.pList.push(tem);
                }
            }
            this.$ctx.stroke();
            this.initImg=this.$ctx.getImageData(0,0,this.options.width,this.options.height);
        };
        this.initDraw();
        //this.$ctx.stroke();
        this.isIn=function(x,y){
            for (var p in that.pList){
                //console.log(that.pList[p][x]);
                //  console.log(( Math.pow((x-that.pList[p][x]),2)+Math.pow((y-that.pList[p][y]),2)));
                if(( Math.pow((x-that.pList[p]["x"]),2)+Math.pow((y-that.pList[p]["y"]),2) ) < Math.pow(this.rr,2)){
                    return that.pList[p];
                }
            }
            return 0;
        };
        this.pointDraw =function(c){
            if (arguments.length>0){
                that.$ctx.strokeStyle=c;
                that.$ctx.fillStyle=c;
            }
            for (var p in that.sList){
                that.$ctx.moveTo(that.sList[p]["x"]+that.pr,that.sList[p]["y"]);
                that.$ctx.arc(that.sList[p]["x"],that.sList[p]["y"],that.pr,0,2*Math.PI);
                that.$ctx.fill();
            }
        };
        this.lineDraw=function (c){
            if (arguments.length>0){
                that.$ctx.strokeStyle=c;
                that.$ctx.fillStyle=c;
            }
            if(that.sList.length > 0){
                for( var p in that.sList){
                    if(p == 0){
                        //console.log(that.sList[p]["x"],that.sList[p]["y"]);
                        that.$ctx.moveTo(that.sList[p]["x"],that.sList[p]["y"]);
                        continue;
                    }
                    that.$ctx.lineTo(that.sList[p]["x"],that.sList[p]["y"]);
                    //console.log(that.sList[p]["x"],that.sList[p]["y"]);
                }
            }
        };
        this.allDraw =function(c){
            if (arguments.length>0){
                this.pointDraw(c);
                this.lineDraw(c);
                that.$ctx.stroke();
            }
            else {
                this.pointDraw();
                this.lineDraw();
            }
        };
        this.draw=function(x,y){
            that.$ctx.clearRect(0,0,that.options.width,that.options.height);
            that.$ctx.beginPath();
            //that.initDraw();
            that.$ctx.putImageData(this.initImg,0,0);
            that.$ctx.lineWidth=4;
            that.pointDraw(that.options.lineColor);
            that.lineDraw(that.options.lineColor);
            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"
    };
    function Plugin(option,arg) {
        return this.each(function () {
            var $this   = $(this);
            var options = $.extend({}, GesturePasswd.DEFAULTS, typeof option == 'object' && option);
            var data    = $this.data('GesturePasswd');
            var action  = typeof option == 'string' ? option : NaN;
            if (!data) $this.data('danmu', (data = new GesturePasswd(this, options)));
            if (action)	data[action](arg);
        })
    }
    $.fn.GesturePasswd             = Plugin;
    $.fn.GesturePasswd.Constructor = GesturePasswd;
});

display-server/src/main/webapp/res/js/require-config.js

@@ -55,7 +55,8 @@ require.config({
		"echarts": 'http://echarts.baidu.com/build/dist',
		"icharts": 'base/chart/ichart/ichart.1.2.1.min',
		
		"fastclick":"base/fastclick/fastclick"
		"fastclick":"base/fastclick/fastclick",
		"gesturePassword":"base/gesture.password"
	},
	deps: [],
	callback: function(){

display-server/src/main/webapp/template/webapp/more/opensource/GesturePassword.html

@@ -0,0 +1,43 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	<title>手势锁</title>
	{%>template/common/Head.html%}
	<script src="biz/js/more/opensource/GesturePassword.js"></script>
    <style type="text/css">
    .m_content {
        text-align: center;
    	background: #fff;
    }
    .user-avatar {
    	margin:10px auto;
    }
    .user-avatar img {
    	border-radius:50%;
    	width: 1rem;
    }
    </style>
</head>
<body>
<div class="c_navBar">
	<div class="left">
		<div class="back">
			<span class="e_ico-back"></span>
			<span class="text">手势锁</span>
		</div>
	</div>
</div>
<div class="m_content m_content-nofooter" id="content">
	<div class="user-avatar"><img src="biz/img/temp/female.png" /></div> 
	<div class="c_title">欢迎回来，绘制解锁图案：Z</div>
	<div id="gesturepwd" style="margin:0 auto"></div>
	<div class="e_space"></div>
</div>
</body>
<script type="text/javascript">
</script>
</html>

display-server/src/main/webapp/template/webapp/more/opensource/OpenSourceComponent.html

@@ -36,7 +36,7 @@
					</div>
				</div>
			</li>
			<li action="">
			<li action="GesturePassword">
				<div class="content">
					<div class="main">
						<div class="title">手势密码</div>